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

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.

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.