Formatting a number to have commas at every 1000 factor

Question

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?

Slipcase

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"? – Seaport

Possible duplicate of Currency Pipe in Angular 2 – Unchurch

@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. – Slipcase

Possible duplicate of How to print a number with commas as thousands separators in JavaScript – Seaport

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()) – Seaport

In addition to @Mike'Pomax'Kamermans suggestion: (1234567).toLocaleString('en-US'). – Livengood

@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. – Slipcase

It would be good to mark the answer accepted if you've used the solution provided by it ;) – Leatheroid

Possible duplicate of Formatting JavaScript number with commas – Udele

Answer 1

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.

Leatheroid

or even simpler, (123456789).toLocaleString(), because JavaScript has this built in =) – Seaport

This is probably the best solution, but usage examples would be good to make this more useful than a link-only answer. – Unchurch

@Aurora0001, example added. I haven't expected this question to get such engagement :) – Leatheroid

@Mike, that's a very limited and unstable solution. For me (1234567).toLocaleString() produces 1 234 567. Even if the result was correct, I wouldn't use it in a serious project when better way is available. – Leatheroid

@DanielKucal remember to add the local itself. (1234567).toLocaleString("en") if you need commas. With explicit locale, this is the most correct solution – Seaport

This will produce a decimal 1,234,567.00!! – Rommel

In Angular 15+ import DecimalPipe from @angular/common – Semipermeable

Answer 2

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

Hartzog

This produces single digit numbers as 01, 02, 03, etc. To just add commas, you can just use {{ element.total | number }}. – Mining

Provide a link in the comment instead of copying pasting the same answer. https://mcmap.net/q/103806/-how-to-specify-locale-thousand-separator-for-number-pipe-in-angular-4 – Weider

What can we do in the Component file to modify data if i don't have the option to add pipe in template? – Bernadette

use these (taken from tutorialspoint.com/typescript/typescript_number_tofixed.htm): num3.toFixed() is 177 num3.toFixed(2) is 177.23 num3.toFixed(6) is 177.234000 – Hartzog

Answer 3

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.

Eolith

piggybacking on this {{ myVAlue | number }} also appears to work since the default locale is en-us. – Bailes