Valuta formatteren met behulp van een pipe in Angular

Met de CurrencyPipe pipe kan valutaweergave worden geformatteerd. In de eerste parameter van de pipe wordt de valutacode doorgegeven volgens de ISO 4217 specificatie (standaard USD). In de tweede parameter stellen we de valutaweergave in. Deze kan de volgende waarden aannemen: 'code' (valutacode), 'symbol' (valutasymbool), 'symbol-narrow' (voor landen met meerdere valutasymbolen), 'string' (voor het weergeven van een willekeurige tekenreeks). In de derde optionele parameter kunnen we het getalformaat instellen, vergelijkbaar met de DecimalPipe pipe. In de vierde optionele parameter kan de code van de gebruikte locale worden opgegeven:

<div>{{ value | number : valutacode : valutaweergave : getalformaat : localecode }}</div>

Voorbeelden

Laten we de werking van de pipe uitproberen met voorbeelden. Hiervoor stellen we in de componentklasse de volgende eigenschap salary in, die het salaris in een bepaalde valuta bevat:

export class AppComponent {
	salary: number = 867.564;
}

Voorbeeld

Laten we ons getal omzetten naar valuta:

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

Resultaat van de code:

<div>$867.56</div>

Voorbeeld

Laten we nu de valutaweergave instellen in Russische roebels:

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

Resultaat van de code:

<div>RUB867.56</div>

Voorbeeld

Laten we het symbool van de Russische roebel naast het getal weergeven:

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

Resultaat van de code:

<div>₽867.56</div>

Voorbeeld

Laten we nu het getal weergeven met vier cijfers in het breukdeel:

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

Resultaat van de code:

<div>RUB867.5640</div>

Voorbeeld

Laten we de volgende tekenreeks toevoegen aan de valutaweergave:

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

Resultaat van de code:

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