Valuutan muotoilu putken avulla Angularissa

CurrencyPipe-putkella voidaan muotoilla valuutan näyttö. Putken ensimmäisessä parametrissa välitetään valuutan koodi ISO 4217 -spesifikaation mukaisesti (oletusarvoisesti USD). Toisessa parametrissa asetamme valuutan näyttötavan. Se voi saada seuraavat arvot: 'code' (valuutan koodi), 'symbol' (sen symboli), 'symbol-narrow' (maissa, joilla on useita valuuttasymboleja), 'string' (minkä tahansa merkkijonon näyttämiseen). Kolmannessa valinnaisessa parametrissa voimme määrittää luvun muodon, vastaavan kuin DecimalPipe-putki. Neljännessä valinnaisessa parametrissa voidaan määrittää käytetyn lokalisaation koodi:

<div>{{ value | number : valuutan koodi : valuutan näyttötapa : luvun muoto : lokalisaation koodi }}</div>

Esimerkkejä

Kokeillaan putken toimintaa esimerkein. Tätä varten asetamme komponentin luokkaan seuraavan salary-ominaisuuden, joka sisältää palkkaa tietyssä valuutassa:

export class AppComponent {
	salary: number = 867.564;
}

Esimerkki

Muunnetaan lukumme valuutaksi:

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

Koodin suorituksen tulos:

<div>$867.56</div>

Esimerkki

Määritetään nyt valuutan näyttötapa Venäjän ruplina:

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

Koodin suorituksen tulos:

<div>RUB867.56</div>

Esimerkki

Näytetään luvun vieressä Venäjän ruplan symboli:

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

Koodin suorituksen tulos:

<div>₽867.56</div>

Esimerkki

Muotoillaan nyt luku neljällä numerolla murto-osassa:

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

Koodin suorituksen tulos:

<div>RUB867.5640</div>

Esimerkki

Lisätään valuutan näyttöön seuraava merkkijono:

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

Koodin suorituksen tulos:

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