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

Question

How can I specify/override default (locale) thousand separator for number pipe in Angular 4, e.g.?

{{p.total | number}}

?

Answer 1

Angular 5+

Since Angular 5, a locale argument has been added to the decimal pipe as you can see in the official documentation: https://angular.io/api/common/DecimalPipe. That means you can choose your locale directly while calling the pipe, for instance:

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

Just be aware that will also change the decimal separator.

---

Angular 2+

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

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

If you don't want to change the locale or associated default values of your entire project, I think your best shot is to write your own pipe dealing with your special case. Don't worry, pipes are extremely 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 '';
    }
  }
}

Don't forget to add it to a NgModule to use it.

Answer 2

For the number: 1234567

Use the following Pipe:

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

In order to produce 1,234,567.00

And Use the following Pipe:

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

In order to get rid of the extra 0's and to produce 1,234,567

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

Note that the '2.' indicates amount of integers after decimal.

When a value of 0 is loaded in a table using this pipe for example, the displayed value would be '00' (because of the '2.')

To solve this use '1.' instead when input value is 0.

Answer 3

You can use locale like 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 possibilities in https://angular.io/api/common/DecimalPipe and https://angular.io/guide/i18n#setting-up-the-locale-of-your-app official docs.

Answer 4

Following is the my solution and it will help to 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));
      }
    
    }

Number of digits can change by changing the value of minimumFractionDigits. In the html you can use as follows

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

Number format will change according to value of locale.

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

Answer 5

You can write a custom pipe for doing 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

I implemented this for my purpose. Ex:- 12345.67 => 12,345.67

First, I generated a PIpe using ng g pipe pipes/thousandSeparator and I edited that file like this

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'thousandSeparator'
})
export class ThousandSeparatorPipe implements PipeTransform {

  transform(nStr: any): any {
    if (nStr === '') { return ''; }
    let x, x1, x2, rgx;
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x[1];
    rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + (x2 ? `.${x2}` : '');
  }
}

Also i added it into provider in app.module.ts

providers: [ThousandSeparatorPipe]

Then, I can use it like this.

in components

import { Component, OnInit } from '@angular/core';
import { ThousandSeparatorPipe } from 'src/app/pipes/thousand-separator.pipe';

@Component({
  selector: 'app-my',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss']
})
export class MyComponent implements OnInit {

  value = 12345.67;

  constructor(private thousandSeparator: ThousandSeparatorPipe) { }

  ngOnInit() {
    console.log(this.thousandSeparator.transform(this.value));
  }

}

in html

<p>{{value | thousandSeparator}}</p>

Answer 7

I know this could be late but hope it 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'}}