Formatering av valuta ved hjelp av en pipe i Angular

Med CurrencyPipe kan du formatere valutaens utseende. I den første parameteren til pipen sendes valutakoden i henhold til ISO 4217 spesifikasjonen (standard er USD). I den andre parameteren angir vi viseformen for valutaen. Den kan ha følgende verdier: 'code' (valutakode), 'symbol' (dens symbol), 'symbol-narrow' (for land som har flere valutasymboler), 'string' (for å vise en hvilken som helst streng). I den tredje valgfrie parameteren kan vi angi tallformatet, som ligner på DecimalPipe. I den fjerde valgfrie parameteren kan du angi koden for den brukte lokaliteten:

html<div>{{ value | number : valutakode : visningsmodus for valuta : tallformat : lokalitetskode }}</div>

Eksempler

La oss prøve pipen med eksempler. For å gjøre dette, la oss i komponentklassen definere følgende egenskap salary, som inneholder lønn i en bestemt valuta:

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

Eksempel

La oss konvertere tallet vårt til valuta:

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

Resultat av koden:

html<div>$867.56</div>

Eksempel

La oss nå angi visning av valuta i russiske rubler:

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

Resultat av koden:

html<div>RUB867.56</div>

Eksempel

La oss vise symbolet for den russiske rubelen ved siden av tallet:

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

Resultat av koden:

html<div>₽867.56</div>

Eksempel

La oss nå ha et tall med fire sifre i brøkdelen:

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

Resultat av koden:

html<div>RUB867.5640</div>

Eksempel

La oss legge til følgende streng til valutaens visning:

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

Resultat av koden:

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