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

by

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.

More Related Contents:

  1. Angular 2.0 router not working on reloading the browser
  2. Angular – Use pipes in services and components
  3. How do I create a singleton service in Angular 2?
  4. OrderBy pipe issue
  5. Angular CLI SASS options
  6. PowerShell script add ‘–prod’ argument to build Angular CLI project
  7. Expandable table rows in angular 4 with angular material
  8. Angular 2 cache observable http result data [duplicate]
  9. localStorage is not defined (Angular Universal)
  10. Application becomes unresponsive after encountering an exception
  11. How to set environment via `ng serve` in Angular 6
  12. How can I communicate between two child components in angular? [duplicate]
  13. Deep copying objects in Angular
  14. Angular 2 Read More Directive
  15. When to use Interface and Model in TypeScript / Angular
  16. HttpClient POST request using x-www-form-urlencoded
  17. How to pass data to dialog of angular material 2
  18. How do I inject a parent component into a child component?
  19. Angular – two subscriptions in ngOnInit result in object ‘undefined’
  20. Render content between the component tags
  21. rxjs/Subject.d.ts error : Class ‘Subject’ incorrectly extends base class ‘Observable’
  22. FormBuilder group is deprecated
  23. How to access host component from directive?
  24. Property ‘toPromise’ does not exist on type ‘Observable’
  25. TypeError: Object prototype may only be an Object or null: undefined Angular 8
  26. How to call scrollIntoView on an element in angular 2+
  27. Angular 4 ExpressionChangedAfterItHasBeenCheckedError
  28. How do I get experimental ngTemplateOutlet to work?
  29. Custom encoding for urls using Angular 2 Router (using a + sign in place of a space)
  30. Custom Exception Handler in Angular2

Leave a Comment