Angular decimal pipe dots formatting

I'm using Angular(4) decimal pipe but the dots is showing with numbers that have more than 4 digits, but with 4 digits the dot is not showing.

Example:

<td>USD {{amount| number: '1.2-2'}} </td>

14314,23123 returns 14.314,23

but

7157,11123 returns 7157,11 instead of 7.157,11

Is there any way of fixing it without making a custom pipe?

2 answers

  • answered 2019-12-09 13:32 Doflamingo19

    try this:

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

    in your html:

     {{ amount| example}}
    

  • answered 2019-12-09 13:48 nsajdok

    Your bug is probably related to active locale. Since Angular 5, a locale argument has been added to the decimal pipe. You can pass it and check the result.

    Additionally, I created a simple example on Stakblitz with a default locale and NG in version 4.4.7 - everything works as you needed, so try to debugging your current locale.

    BTW. For cash presentation you can use CurrencyPipe instead DecimalPipe with hardcoded currency code.