Displaying a number in Indian format using angular 2

Question

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?

why vuejs is in the tags ? and so do jquery ? – FosterZ Dec 20 '18 at 06:18 — FosterZ, Dec 20 '18 at 06:18

score 9 · Answer 1 · answered Dec 20 '18 at 05:02

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'));

Code Maniac · Answer 2 · 2018-12-20T05:13:27.410

6

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'));

edited Dec 20 '18 at 05:13

answered Dec 20 '18 at 04:47

Code Maniac

37,143
5
39
60

2

how this is going to fulfill his requirement, while he already mentioned that I don't need in standard formate, he wants to formate currency in his custom formate. – Farhat Zaman Dec 20 '18 at 04:51

score 2 · Answer 3 · answered Dec 20 '18 at 05:38

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 ] ] ] ] }}

score 0 · Answer 4 · answered Dec 20 '18 at 04:50

0

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);

answered Dec 20 '18 at 04:50

Zunnurain Badar

920
2
7
28

score 0 · Answer 5 · answered Mar 21 '22 at 18:44

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.

Displaying a number in Indian format using angular 2

5 Answers5