Formátování měny pomocí rourového prvku v Angular

Pomocí rourového prvku CurrencyPipe lze formátovat výpis měny. V prvním parametru rourového prvku se předává kód měny podle specifikace ISO 4217 (ve výchozím nastavení USD). V druhém parametru nastavíme zobrazení měny. Může nabývat následujících hodnot: 'code' (kód měny), 'symbol' (její symbol), 'symbol-narrow' (pro země, které mají několik symbolů měny), 'string' (pro výpis libovolného řetězce). Ve třetím nepovinném parametru můžeme nastavit formát čísla, analogický rourovému prvku DecimalPipe. Ve čtvrtém nepovinném parametru lze uved kód použité lokality:

html<div>{{ value | number : kód měny : zobrazení měny : formát čísla : kód lokality }}</div>

Příklady

Vyzkoušejme si činnost rourového prvku na příkladech. K tomu v třídě komponenty nastavme následující vlastnost salary, obsahující plat v určité měně:

app/app.component.tsexport class AppComponent {
  salary: number = 867.564;
}

Příklad

Převeďme naše číslo na měnu:

app/app.component.html<div>{{ salary | currency }}</div>

Výsledek provedení kódu:

html<div>$867.56</div>

Příklad

Nyní uvedme zobrazení měny v ruských rublech:

app/app.component.html<div>{{ salary | currency:'RUB':'code' }}</div>

Výsledek provedení kódu:

html<div>RUB867.56</div>

Příklad

Vypišme vedle čísla symbol ruského rublu:

app/app.component.html<div>{{ salary | currency:'RUB':'symbol-narrow' }}</div>

Výsledek provedení kódu:

html<div>₽867.56</div>

Příklad

Nyní zobrazme číslo se čtyřmi číslicemi v desetinné části:

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

Výsledek provedení kódu:

html<div>RUB867.5640</div>

Příklad

Přidejme k zobrazení měny následující řetězec:

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

Výsledek provedení kódu:

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