Formatting a number to have commas at every 1000 factor

I need to format a number like 1234567 as 1,234,567 but don't know how to do this. I tried using currency pipe of TypeScript but that gives USD or $ in front of the number. I want to remove that and format the number in this way 1,234,567. How can I do this?


Just use the number (decimal) pipe instead.

To give an example:

{{ '1234567' | number:'1.0':'en-US' }}

will produce output 1,234,567.

If you do not change the default locale (by calling registerLocaleData() or providing LOCALE_ID), then simple {{'1234567' | number}} will work as well.


The last answer will produce 1,234,567.00

Note the 2 decimals.

Use the following Pipe:

{{ element.total | number: '2.'}}

In order to produce 1,234,567


Per the official Angular documentation for the DecimalPipe, which is defined with the structure {{ value_expression | number [ : digitsInfo [ : locale ] ] }}, I was able achieve the desired number formatting by using:

{{ myValue | number:'':'en' }}

The empty string ('') causes the pipe to uses the default digitsInfo values for minIntegerDigits (1), minFractionDigits (0), and maxFractionDigits (3).

The locale being set to en causes the value to be displayed with commas marking the thousands, millions, etc. positions.