CODEWITHSUNDEEP
javascriptjqueryangularvuejs2angular-pipe
lakhan
lakhan

Reputation: 265

Displaying a number in Indian format using angular 2

I want to print numbers with commas as thousands, lacs, crores separators. for e.g:

     10,000 - ten thousand
   1,00,000 - 1 lakh
  10,00,000 - 10 lakh
1,00,00,000 - 1 crore

I have used angular's number pipe to implement comma separated values but not getting proper output it displays like this 1,000,000 - 10 lakh.

How can i implement above functionality using angular/javascript or is there any pipe for this in angular?

Upvotes: 7

Views: 5688

Answers (5)

Manish
Manish

Reputation: 1972

Here is my implementation to achieve this

Create an custom pipe:

import {Inject, Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'currencyFormat'
})
export class CurrencyFormatPipe implements PipeTransform {
  constructor() {
  }

  transform(value: any, ...args: any[]): any {
    if (value === undefined || value === null) {
      return '';
    }
    return new Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR' }).format(value);
  }

}

use this pipe in you template to get output in Indian format.

Please checkout Intl.NumberFormat documentation here to understand the parameters.

Upvotes: 0

Hrishikesh Kale
Hrishikesh Kale

Reputation: 6568

I hope you have used pipe in correct way,

but just to confirm we can use currency pipe like 

 {{price|currency:'INR':true}}

here is a skeleton syntax for currency by angular 

{{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}

Upvotes: 2

Code Maniac
Code Maniac

Reputation: 37755

You can do it with toLocaleString()

In localeString you need to provide locales in this case you need to use en-IN

let num1 = 1000;
let num2 = 10000;
let num3 = 1000000;

console.log(num1.toLocaleString('en-IN'));
console.log(num2.toLocaleString('en-IN'));
console.log(num3.toLocaleString('en-IN'));

Upvotes: 6

Prasad Telkikar
Prasad Telkikar

Reputation: 16079

You can use .toLocalString()

The toLocaleString() method returns a string with a language-sensitive representation of this number.

var tenK= 10000;
var oneL = 100000;
var tenL = 1000000;
var oneCr = 10000000;
console.log(tenK.toLocaleString('en-IN'));
console.log(oneL.toLocaleString('en-IN'));
console.log(tenL.toLocaleString('en-IN'));
console.log(oneCr.toLocaleString('en-IN'));

Upvotes: 9

Zunnurain Badar
Zunnurain Badar

Reputation: 1042

You can also do this with regular expressions like this in Javascript:

formatNumber = (num)=>{
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
var formattedNumber = formatNumber(10000000);
console.log(formattedNumber);

Upvotes: 0

Related Questions