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.

Possible duplicate of [How to set locale for numbers in angular 2.0](http://stackoverflow.com/questions/37684360/how-to-set-locale-for-numbers-in-angular-2-0) — Igor, Mar 30 '17 at 20:29
You shouldn't do that as decimal numbers use dot to mark fractions. — coderek, Mar 30 '17 at 20:38
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. — , Mar 31 '17 at 03:11
@coderek there is a country called "germany", where 1.234.567,12€ would be one million twohundredthirtyfourthousand fivehundredsixtyseven euros and 12 cents, so.... :D — Guntram, Jun 14 '17 at 10:55

Jaroslaw K. · Answer 1 · 2017-03-31T09:35:46.313

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]
})

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. — , Mar 31 '17 at 11:14

score 4 · Accepted Answer · edited Sep 10 '17 at 04:37

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');

kabus · Answer 3 · 2017-08-18T06:16:43.853

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

edited Aug 18 '17 at 06:16

answered Aug 18 '17 at 06:01

kabus

899
1
11
20

separators of thousands in angular 2

3 Answers3