Formátovanie meny pomocou kanála v Angular

Pomocou kanála CurrencyPipe je možné formátovať výstup meny. V prvom parametri kanála sa prenesie kód meny podľa špecifikácie ISO 4217 (predvolené je USD). V druhom parametri nastavíme zobrazenie meny. Môže nadobúdať nasledujúce hodnoty: 'code' (kód meny), 'symbol' (jej symbol), 'symbol-narrow' (pre krajiny, ktoré majú viacero symbolov meny), 'string' (pre výstup ľubovoľného reťazca). V treťom voliteľnom parametri môžeme nastaviť formát čísla, analogický kanálu DecimalPipe. Vo štvrtom voliteľnom parametri je možné uviesť kód použitej lokality:

html<div>{{ value | number : kód meny : zobrazenie meny : formát čísla : kód lokality }}</div>

Príklady

Vyskúšajme si činnosť kanála na príkladoch. Na tento účel nastavme v triede komponentu nasledujúcu vlastnosť salary, obsahujúcu plat v nejakej mene:

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

Príklad

Transformujme naše číslo na menu:

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

Výsledok vykonania kódu:

html<div>$867.56</div>

Príklad

Teraz určme zobrazenie meny v ruských rubľoch:

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

Výsledok vykonania kódu:

html<div>RUB867.56</div>

Príklad

Zobrazme vedľa čísla symbol ruského rubľa:

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

Výsledok vykonania kódu:

html<div>₽867.56</div>

Príklad

Teraz zobrazme číslo so štyrmi číslicami v zlomkovej časti:

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

Výsledok vykonania kódu:

html<div>RUB867.5640</div>

Príklad

Pridajme k zobrazeniu meny nasledujúci reťazec:

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

Výsledok vykonania kódu:

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