1

estoy usando angular 4 y quiero poder usar un pipe de separador de miles por ejemplo si el monto es 6000 que aparezca 6.000, si el monto es 60000 que aparezca 60.000 y asi...

he intentado usar algunos pipes pero no logro dar con uno que me sirva, para mostrar el monto utilizo un

 ngFor="let item of items" 

y en la parte que muestro el monto puse

{{item.Monto/1000 | currency:'USD':true:'2.3-3'}}

con eso me aparece el monto como 06.000 en vez de 6.000

5
  • te invito a leer un poco mas de angular y los formatos Commented el 7 feb. 2018 a las 17:28
  • cambia el 2.3-3 por 1.3-3 Commented el 7 feb. 2018 a las 17:31
  • Efectivamente me funciona, me aparece 60.000 y 6.000 pero al poner un monto de 600 me aparece como 0.600 , de todos modos se agradece la disposición y respuesta rápida Commented el 7 feb. 2018 a las 17:47
  • Lo de (0.600) te sucede porque es para poner el separador de parte fraccionaria (la , en nuestro idioma), no de miles. Por eso de denomina "DecimalPipe", prueba con 6.000.000 (6 millones) y solo deberías ver 6000.000 Commented el 7 feb. 2018 a las 17:54
  • intenta con 3-3, el problema es que lo que estas haciendo estas definiciendo una mascara y dice 0.000 Commented el 7 feb. 2018 a las 18:27

1 respuesta 1

2

Puedes utilizar el siguiente Pipe:

Cada 3 dígitos inserta un "."(punto) mediante la expresión regular

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

    @Pipe({
        name: 'thousandsPipe'
    })

export class ThousandsPipe implements PipeTransform {

    public transform(value: any) {
        return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");;
    }
}

En el HTML:

{{item.Monto/1000 | thousandsPipe}}

Dato importante, esto solo agrega la separación de miles, no la decimal ni la moneda.


Información Adicional:

En cuanto al Pipe propio de Angular que utilizas, funciona de la siguiente forma:

variable_numero | number[:digitInfo]

digitInfo esta constituido de la siguiente forma:

{cantMinDigitosEnteros}.{cantMinDigitosDecimales}-{cantMaxDigitosDecimales}

CurrencyPipe, y DecimalPipe, recaen sobre el mismo funcionamiento, varían en la posibilidad de insertar el tipo de moneda y lo que eso implica.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.