Cómo especificar el separador de miles de locale para la tubería numérica en Angular 4

Solución:

Angular 5+

Desde Angular 5, se ha agregado un argumento de configuración regional a la tubería decimal como puede ver en la documentación oficial: https://angular.io/api/common/DecimalPipe. Eso significa que puede elegir su configuración regional directamente mientras llama a la tubería, por ejemplo:

{{p.total | number:'':'fr-FR'}}

Solo tenga en cuenta que también cambiará el separador decimal.

---

Angular 2+

o si desea cambiar SOLO el separador de miles …

De acuerdo con la documentación de Angular en DecimalPipe: https://v2.angular.io/docs/ts/latest/api/common/index/DecimalPipe-pipe.html, no hay un argumento explícito que se pueda agregar a la llamada de tubería para excepcionalmente alterar los caracteres utilizados para formatear.

Si no desea cambiar la configuración regional o los valores predeterminados asociados de todo su proyecto, creo que su mejor oportunidad es escribir su propia tubería que se ocupe de su caso especial. No se preocupe, las tuberías son extremadamente fáciles de escribir.

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

No olvide agregarlo a un NgModule para usarlo.

Para el número: 1234567

Utilice la siguiente tubería:

{{element.total | Número 2′}}

Para producir 1.234.567,00

Y use la siguiente tubería:

{{element.total | Número 2.’}}

Para deshacerse de los ceros adicionales y producir 1,234,567

————————————————– ————————————–

Tenga en cuenta que el ‘2’ indica la cantidad de números enteros después del decimal.

Cuando se carga un valor de 0 en una tabla usando esta tubería, por ejemplo, el valor mostrado sería ’00’ (debido al ‘2’)

Para resolver este uso ‘1’. en su lugar, cuando el valor de entrada es 0.

Puedes usar lugar como en este ejemplo probado con Angular 6.0.2:

card-component.ts

import { registerLocaleData } from '@angular/common';
import es from '@angular/common/locales/es';
import { Component, OnInit } from '@angular/core';

@Component( {
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: [ './card.component.css' ]
} )
export class CardComponent implements OnInit {

  value = 1234567.987;

  constructor() { }

  ngOnInit() {
    registerLocaleData( es );
  }

}

card-component.html

<!-- result: 1.234.567,987 -->
<span>{{ value | number:'':'es' }}</span>

Puede ver otras posibilidades en los documentos oficiales https://angular.io/api/common/DecimalPipe y https://angular.io/guide/i18n#setting-up-the-locale-of-your-app.

---

---

Utiliza Nuestro Buscador