separators of thousands in angular 2

Question

i have tried this one in my proyect:

<div padding *ngIf="TotalAPagar">
    $ {{TotalAPagar | number }}  
</div>

my variable is called TotalAPagar, and I'm using number pipe, but it shows the value like this 1,000,500.

I need that to change the numbering convention to dots. Eg. 1.000.000

I have been reading about in the docs in angular but doesn't have any example.

Solution 1

​After reading in forums and docs about angular js y javascript i found a method that puts the numbers in format and currency, that method is toLocaleString(), is a method from javascript that helps to put it in the currency or languaje that you need.

i search the name of the country that i need with the method and show me the info that need about. (http://www.localeplanet.com/icu/es-CO/), In my case was colombia.

in my functions i just have to add the .toLocaleString('es-CO') to the result and put the value with the specified currency.

for example:

this.TotalAPagar = (this.calcularDescuentosLiquidacion(this.TotalDevengadoValor, this.sueldoPendientePorCancelarValor, this.item.libranza, this.item.prestamo_empleado)+ this.calcularIndemnizacion(this.item.promedio_salario, this.item.fecha_fin_contrato, this.item.fecha_inicio_contrato)).toLocaleString('es-CO');

Solution 2

I think that there are two ways to resolve this problem:

---

1. You can trying overwrite DecimalPipe from @angular/common library:

In this way:

point-replacer.pipe.ts

import { Pipe } from '@angular/core';
import {DecimalPipe} from "@angular/common";

@Pipe({
    name: 'pointReplacer'
})
export class PointReplacerPipe extends DecimalPipe {

  transform(value: any, digits?: string): string {
        return super.transform(value, digits).replace(',', '.');


    }
}

and in your html code:

<div padding *ngIf="TotalAPagar">
    $ {{TotalAPagar | pointReplacer }}  
</div>

---

2. You can write your own pipe, which replaces characters and use **double pipe in your html code**

Try in this way:

point-replacer.pipe.ts

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

@Pipe({
    name: 'pointReplacer'
})

export class PointReplacerPipe implements PipeTransform {
    transform(value: string, args: any[]): string {
        if(value) {
          return value.replace(',', '.');
        }
        return '';
    }
}

and in your html code:

<div padding *ngIf="TotalAPagar">
    $ {{TotalAPagar | number | pointReplacer }}  
</div>

---

No matter which method you choose, don't forget to declare your own pipe in module, where you use it:

@NgModule({
  declarations: [PointReplacerPipe],
  providers: [PointReplacerPipe]
}) 

Solution 3

I think that this is a cleaner solution:

Import LOCALE_ID in app.modules.ts

import {ErrorHandler, NgModule, LOCALE_ID} from '@angular/core';

and define in providers like this:

  providers: [
    PouchServiceProvider,
    DbProvider, {
      provide: LOCALE_ID,
      useValue: "nl-NL"
    }
  ]

this will auto choose the seperator id, based on local_id

Comments

[Igor]

Possible duplicate of How to set locale for numbers in angular 2.0

[coderek]

You shouldn't do that as decimal numbers use dot to mark fractions.

[Admin]

Have you looked at the currency pipe? The locale-specific aspects can be handled via the LOCALE_ID provider. If you want dynamic locales, you could consider customiizing/subclassing the currency pipe.

[Guntram]

@coderek there is a country called "germany", where 1.234.567,12€ would be one million twohundredthirtyfourthousand fivehundredsixtyseven euros and 12 cents, so.... :D

[Admin]

This is not a robust solution. How would you adapt it to Indian number grouping, as in 1,00,000? Numbers and currencies should be formatted using number and currency formatting libraries, not by ad hoc string manipulations.