Oblikovanje valute s pomočjo cevovoda v Angular

S pomočjo cevovoda CurrencyPipe lahko oblikujemo izpis valute. V prvem parametru cevovoda se posreduje koda valute v skladu s specifikacijo ISO 4217 (privzeto USD). V drugem parametru nastavimo prikaz valute. Lahko sprejme naslednje vrednosti: 'code' (koda valute), 'symbol' (njen simbol), 'symbol-narrow' (za države, ki imajo več simbolov valute), 'string' (za izpis poljubnega niza). V tretjem neobveznem parametru lahko nastavimo obliko števila, podobno kot pri cevovodu DecimalPipe. V četrtem neobveznem parametru lahko navedemo kodo uporabljene lokalne nastavitve:

html<div>{{ value | number : koda valute : prikaz valute : oblika števila : koda lokalne nastavitve }}</div>

Primeri

Preizkusimo delovanje cevovoda s primeri. Za to v razredu komponente nastavimo naslednjo lastnost salary, ki vsebuje plačo v določeni valuti:

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

Primer

Pretvorimo našo številko v valuto:

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

Rezultat izvajanja kode:

html<div>$867.56</div>

Primer

Zdaj pa navedimo prikaz valute v ruskih rubljih:

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

Rezultat izvajanja kode:

html<div>RUB867.56</div>

Primer

Izpišimo poleg številke simbol ruskega rublja:

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

Rezultat izvajanja kode:

html<div>₽867.56</div>

Primer

Zdaj pa številko s štirimi števkami v delnem delu:

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

Rezultat izvajanja kode:

html<div>RUB867.5640</div>

Primer

Dodajmo k prikazu valute naslednji niz:

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

Rezultat izvajanja kode:

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