Formateo de números con canales en Angular

Con el canal DecimalPipe se pueden formatear números. En el primer parámetro del canal pasamos el número mínimo de dígitos en la parte entera. En el segundo parámetro indicamos el número mínimo de dígitos en la parte fraccionaria. En el tercer parámetro opcional establecemos el número máximo de dígitos en la parte fraccionaria.

A pesar de que nuestro canal se llama DecimalPipe, para invocarlo escribimos así: number.

Probemos en la práctica. En la clase del componente establezcamos el siguiente número:

export class AppComponent {
	num: number = 18;
}

Ejemplo

Mostremos nuestro número de manera que en su parte entera haya dos dígitos. Además, el número mínimo de dígitos en la parte fraccionaria será 1:

<div>{{ num | number:'2.1' }}</div>

Resultado de la ejecución del código:

<div>18.0</div>

Ejemplo

Ahora establezcamos que en la parte fraccionaria de nuestro número se muestren dos dígitos:

<div>{{ num | number:'2.2' }}</div>

Resultado de la ejecución del código:

<div>18.00</div>

Ejemplo

Establezcamos un nuevo número:

export class AppComponent {
	num: number = 18.67899;
}

Y mostrémoslo en la plantilla HTML de manera que en la parte fraccionaria se muestren como máximo dos dígitos:

<div>{{ num | number:'2.1-2' }}</div>

Resultado de la ejecución del código:

<div>18.68</div>

Ejemplo

Ahora formateemos nuestro número de manera que en su parte entera haya tres dígitos. Y en la parte fraccionaria se muestren cinco dígitos:

<div>{{ num | number:'3.5-6' }}</div>

Resultado de la ejecución del código:

<div>018.67899</div>

Ejemplo

Intentemos mostrar el número mínimo de dígitos en la parte fraccionaria que exceda la cantidad establecida en el número. En nuestro caso mostremos seis dígitos:

<div>{{ num | number:'3.6-8' }}</div>

Como resultado de la ejecución del código veremos que el canal DecimalPipe agregó un cero a la parte fraccionaria:

<div>018.678990</div>