DecimalPipe o Pipes en Angular

6791

- Pipes en Angular
Los Pipes en Angular son una herramienta que se utiliza para modificar los datos o el formato con que éstos se muestran al usuario final en nuestras aplicaciones. Por ejemplo, en la mayoría de los casos los usuarios prefieren ver una fecha en formato April 15, 1988 en lugar del formato Fri Apr 15 1988 00:00:00 GMT-0700 (Pacific Daylight Time). De igual forma, en una aplicación que utilice precios y en algunos casos realice descuentos en más recomendable mostrar el valor final de la forma $ 19.56 que hacerlo $ 19.5598989766… En este último caso podemos usar DecimalPipe, uno de pipes que vienen integrados en Angular por defecto.

- DecimalPipe:
Transforma un número en una cadena, se formatea de acuerdo con ciertas reglas que definimos que determinan el tamaño y el separador de miles, el carácter de punto decimal y otras configuraciones específicas.

- Sintaxis:

{{ número_a_formatear | number:'configDigitos' }}

El parámetro ‘configDigitos’ es un string que define el formato con que se muestran los números. La forma de establecerla es:

{minDigitosEnteros}.{minDigitosDecimales}-{maxDigitosDecimales}.

minDigitosEnteros: mínimo de números enteros.
minDigitosDecimales: mínimo de dígitos decimales.
maxDigitosDecimales: máximo de dígitos decimales.

- Uso:

    Sin formato: devuelve el número tal como es, si tiene más de cinco decimales toma tres. 
    {{ 2.718281828459045 | number }}
    Obtenemos '2.718'{{ 3.14 | number }}
    Obtenemos '3.14'
    
    Formato (3.1-5): Toma el número original con tres enteros y cinco decimales, si los tiene.
    {{ 2.718281828459045 | number:'3.1-5' }}
    Obtenemos '002.71828'{{ 3.14 | number:'3.1-5' }}
    Obtenemos '003.14'

    Formato (3.5-5): Toma el número original con tres enteros y cinco decimales, completos.
    {{ 3.14 | number:'3.5-5' }}
    Obtenemos '003.14000'

    Formato (4.5-5): Toma el número original con cuatro enteros y cinco decimales, completos.
    {{ 2.718281828459045 | number:'4.5-5' }}
    Obtenemos '0,002.71828'
    
    Formato (french): Configuración adicional que utiliza un espacio como separador de miles y la coma como separador de decimales.
    {{ 2.718281828459045 | number:'4.5-5':'fr' }}
    Obtenemos '0 002,71828'
  
    Formato (1.0-0): Toma el número original y redondea el módulo, devuelve un entero.
    {{ -2.5 | number:'1.0-0' }}
    Obtenemos '-3' / diferente a '-2' usando Math.round()

- Ejemplo:
En nuestro ejemplo de mostrar $ 19.56 en lugar de $ 19.5598989766… Podemos utilizar el siguiente formato:

{{ 19.5598989766 | number:1.2-2:'fr'}}

- Documentación:
Sobre DecimalPipe.
Sobre los pipe por defecto de Angular.

- Nota:
Además de utilizar los pipes que suministra Angular podemos encadenarlos e incluso crear nuevos. ¿Te animas a crear un tutorial sobre cómo crear nuevos Pipes en Angular?

hace 7 años