How to specify thousands separator locale for pipe number in Angular 4

Question

How can I specify / override the default thousands separator (locale) for a numbering channel in Angular 4, for example?

{{p.total | number}} 

?

Answer 1

Corner 5+

Starting with Angular 5, the locale argument has been added to the decimal pipe, as you can see in the official documentation: https://angular.io/api/common/DecimalPipe . This means that you can select your language directly when calling the channel, for example:

 {{p.total | number:'':'fr-FR'}} 

Just keep in mind that the decimal separator will also change.

---

Corner 2+

or if you want to change ONLY the thousands separator ...

According to Angular's documentation for DecimalPipe: https://v2.angular.io/docs/ts/latest/api/common/index/DecimalPipe-pipe.html , there is no explicit argument that can be added to a channel call to exclusively change the characters used to formatting.

If you don’t want to change the locale or related defaults for your entire project, I think your best way is to write your own channel dedicated to your special occasion. Do not worry, pipes are very easy to write.

 import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'numberfr' }) export class FrenchDecimalPipe implements PipeTransform { transform(val: number): string { // Format the output to display any way you want here. // For instance: if (val !== undefined && val !== null) { return val.toLocaleString(/*arguments you need*/); } else { return ''; } } } 

Remember to add it to NgModule to use it.

Answer 2

For number: 1234567

Use the following pipe:

{{element.total |

For production 1,234,567.00

And use the following pipe:

{{element.total |

To get rid of the extra 0 and produce 1 234 567

-------------------------------------------------- --------------------------------------

Note that “2” indicates the number of integers after the decimal.

When the value 0 is loaded into the table, for example, using this channel, the displayed value will be “00” (due to “2”).

To solve this problem, use "1". instead, when the input value is 0.

Answer 3

The following is my decision, and it will help someone.

 import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'amountConverter' }) export class AmountConverterPipe implements PipeTransform { transform(value: number | string, locale?: string): string { return new Intl.NumberFormat(locale, { minimumFractionDigits: 2 }).format(Number(value)); } } 

The number of digits can be changed by changing the value of MinomFractionDigits. In HTML you can use as follows

 <span class="strong">{{Price | amountConverter:locale}}</span> 

The number format will change depending on the locale value.

Please refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat for more details.

Answer 4

You can use the locale, as in this example tested with Angular 6.0.2 :

card-component.ts

 import { registerLocaleData } from '@angular/common'; import es from '@angular/common/locales/es'; import { Component, OnInit } from '@angular/core'; @Component( { selector: 'app-card', templateUrl: './card.component.html', styleUrls: [ './card.component.css' ] } ) export class CardComponent implements OnInit { value = 1234567.987; constructor() { } ngOnInit() { registerLocaleData( es ); } } 

card-component.html

 <!-- result: 1.234.567,987 --> <span>{{ value | number:'':'es' }}</span> 

You can view other features in the official docs https://angular.io/api/common/DecimalPipe and https://angular.io/guide/i18n#setting-up-the-locale-of-your-app .

Answer 5

You can write your own channel for this.

 import { Pipe, PipeTransform } from '@angular/core'; @Pipe({name: 'seprator'}) export class Seprator implements PipeTransform { constructor() { } transform(value: string, unit: string): string { if(value == undefined) { return ''; } let n = parseInt(value); const rx = /(\d+)(\d{3})/; return String(n).replace(/^\d+/, function (w) { var res = w; while (rx.test(res)) { res = res.replace(rx, '$1٬$2'); } return res; }); } } 

Answer 6

Use the template number with the locale in the template:

 {{myDigit | number:'':'en'}} 

The first one is for decimal if you want to customize.

Answer 7

I know this may be late, but I hope this helps. angular 2 and above

 import { DecimalPipe } from '@angular/common'; import { Component, OnInit } from '@angular/core'; @Component( { selector: 'app-card', templateUrl: './card.component.html', styleUrls: [ './card.component.css' ] } ) export class CardComponent implements OnInit { value = 1234567.987; constructor(private decimalPipe: DecimalPipe) { } ngOnInit() { //here is how to get it let newValue = this.decPipe.transform(this.value, '.2'); //you can now use the newValue } } 

If you want this in html just do:

 {{ value | number: '.2'}}