36

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?

Mike 'Pomax' Kamermans
  • 49,297
  • 16
  • 112
  • 153
suman
  • 597
  • 1
  • 6
  • 11
  • 2
    I'm confused: if you don't want a currency prefix, why are you using the currency pipe? Is your real question "how do I format a number so that it has commas for every factor of one thousand"? – Mike 'Pomax' Kamermans Nov 17 '16 at 17:49
  • 1
    Possible duplicate of [Currency Pipe in Angular 2](http://stackoverflow.com/questions/39392293/currency-pipe-in-angular-2) – Aurora0001 Nov 17 '16 at 17:52
  • @Mike'Pomax'Kamermans Yes i just need to format a number in this way 1,234,567 for 1234567. so, tried using currency pipe as it formatting the number in the same way i want but with usd prefixed. – suman Nov 17 '16 at 17:53
  • 1
    Possible duplicate of [How to print a number with commas as thousands separators in JavaScript](http://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript) – Mike 'Pomax' Kamermans Nov 17 '16 at 17:57
  • That was also a hint for you to search for that instead - JavaScript has this built in already, you don't need angular or typescript to do this, so if you searched for "adding commas to number in javascript" you would have absolutely found the answer to this (using JS's `toLocaleString()`) – Mike 'Pomax' Kamermans Nov 17 '16 at 17:58
  • In addition to @Mike'Pomax'Kamermans suggestion: `(1234567).toLocaleString('en-US')`. – karliwson Nov 17 '16 at 18:01
  • @all Got this fixed by just using number pipe of angular core instead of currency pipe and making changes to it. Thank you all for the responses. – suman Nov 22 '16 at 17:01
  • It would be good to mark the answer accepted if you've used the solution provided by it ;) – Daniel Kucal Jul 18 '17 at 21:05
  • Possible duplicate of [Formatting JavaScript number with commas](https://stackoverflow.com/questions/26801564/formatting-javascript-number-with-commas) – Michael Freidgeim Mar 12 '19 at 21:24

3 Answers3

65

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.

Daniel Kucal
  • 8,684
  • 6
  • 39
  • 64
16

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

Itamar
  • 885
  • 1
  • 9
  • 17
  • 7
    This produces single digit numbers as 01, 02, 03, etc. To just add commas, you can just use `{{ element.total | number }}`. – Jun Kang Sep 13 '18 at 18:07
  • Provide a link in the comment instead of copying pasting the same answer. https://stackoverflow.com/a/50364297/894532 – Maihan Nijat Jan 21 '19 at 00:40
  • What can we do in the Component file to modify data if i don't have the option to add pipe in template? – Pulak Kanti Bhattacharyya Jun 28 '19 at 13:39
  • use these (taken from https://www.tutorialspoint.com/typescript/typescript_number_tofixed.htm): num3.toFixed() is 177 num3.toFixed(2) is 177.23 num3.toFixed(6) is 177.234000 – Itamar Jul 07 '19 at 12:18
7

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.

Kabb5
  • 3,760
  • 2
  • 33
  • 55