Thousands separators in angular 2

Question

I tried this in my project:

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

my variable is called TotalAPagarand I use a number tube, but it shows a value like this 1000 500 .

I need to change the numbering agreement to dots. For instance. 1,000,000

I read in the docs in angular, but has no example.

Answer 1

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

, , , . (http://www.localeplanet.com/icu/es-CO/), colombia.

toto-stale ('es-CO') .

:

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

Answer 2

, :

---

1. DecimalPipe @ angular/common library:

:

< > -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(',', '.');


    }
}

html-:

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

---

2. , ** double pipe html- **

:

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

html-:

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

---

, , , :

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

Answer 3

I think this is a cleaner solution:

Import LOCALE_ID into 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 automatically select the seperator id based on local_id