Formateo de moneda usando una tubería en Angular

Con la tubería CurrencyPipe se puede formatear la salida de moneda. En el primer parámetro de la tubería se pasa el código de moneda según la especificación ISO 4217 (por defecto USD). En el segundo parámetro configuramos la visualización de la moneda. Puede tomar los siguientes valores: 'code' (código de moneda), 'symbol' (su símbolo), 'symbol-narrow' (para países que tienen varios símbolos de moneda), 'string' (para mostrar cualquier cadena). En el tercer parámetro opcional podemos configurar el formato del número, similar a la tubería DecimalPipe. En el cuarto parámetro opcional se puede indicar el código de localidad utilizado:

<div>{{ value | number : código de moneda : visualización de moneda : formato de número : código de localidad }}</div>

Ejemplos

Probemos el funcionamiento de la tubería con ejemplos. Para ello, en la clase del componente definamos la siguiente propiedad salary, que contiene el salario en cierta moneda:

export class AppComponent {
	salary: number = 867.564;
}

Ejemplo

Transformemos nuestro número a moneda:

<div>{{ salary | currency }}</div>

Resultado de ejecutar el código:

<div>$867.56</div>

Ejemplo

Ahora indiquemos la visualización de la moneda en rublos rusos:

<div>{{ salary | currency:'RUB':'code' }}</div>

Resultado de ejecutar el código:

<div>RUB867.56</div>

Ejemplo

Mostremos junto al número el símbolo del rublo ruso:

<div>{{ salary | currency:'RUB':'symbol-narrow' }}</div>

Resultado de ejecutar el código:

<div>₽867.56</div>

Ejemplo

Ahora mostremos el número con cuatro dígitos en la parte fraccionaria:

<div>{{ salary | currency:'RUB':'symbol':'2.4-5' }}</div>

Resultado de ejecutar el código:

<div>RUB867.5640</div>

Ejemplo

Añadamos a la visualización de la moneda la siguiente cadena:

<div>{{ salary | currency:'RUB':'this is a new currency - ' }}</div>

Resultado de ejecutar el código:

<div>this is a new currency - 867.56</div>