Pénznem formázása pipe segítségével Angularban
A CurrencyPipe pipe segítségével
formázhatjuk a pénznem megjelenítését. A pipe
első paramétereként adjuk meg a pénznem kódját
az ISO 4217 szabvány szerint (alapértelmezetten
USD). A második paraméterben határozzuk meg
a pénznem megjelenítési módját. A következő
értékeket veheti fel: 'code' (pénznem
kódja), 'symbol' (szimbóluma),
'symbol-narrow' (azokra az országokra, amelyeknek
több pénznem szimbólumuk van), 'string'
(bármilyen sztring megjelenítéséhez). A harmadik
opcionális paraméterben megadhatjuk a
szám formátumát, hasonlóan a DecimalPipe
pipe-hoz.
A negyedik opcionális paraméterben megadhatjuk
a használandó locale kódot:
<div>{{ value | number : pénznem kódja : pénznem megjelenítése : szám formátuma : locale kód }}</div>
Példák
Próbáljuk ki a pipe működését példákon keresztül.
Ehhez a komponens osztályban definiáljuk a
következő salary tulajdonságot, amely
egy bizonyos pénznemben kifejezett fizetést tartalmaz:
export class AppComponent {
salary: number = 867.564;
}
. példa
Alakítsuk át a számunkat pénznemmé:
<div>{{ salary | currency }}</div>
A kód végrehajtásának eredménye:
<div>$867.56</div>
. példa
Most adjuk meg a pénznem megjelenítését orosz rubelben:
<div>{{ salary | currency:'RUB':'code' }}</div>
A kód végrehajtásának eredménye:
<div>RUB867.56</div>
. példa
Jelenítsük meg a szám mellett az orosz rubel szimbólumát:
<div>{{ salary | currency:'RUB':'symbol-narrow' }}</div>
A kód végrehajtásának eredménye:
<div>₽867.56</div>
. példa
Most adjunk meg egy számot négy számjeggyel a törtrészben:
<div>{{ salary | currency:'RUB':'symbol':'2.4-5' }}</div>
A kód végrehajtásának eredménye:
<div>RUB867.5640</div>
. példa
Adjunk hozzá a pénznem megjelenítéséhez a következő sztringet:
<div>{{ salary | currency:'RUB':'this is a new currency - ' }}</div>
A kód végrehajtásának eredménye:
<div>this is a new currency - 867.56</div>
Gyakorlati feladatok
Adott szám:
salary: number = 134.89;
Formázd a következő formában:
'$134.89'
Adott szám:
salary: number = 134.89;
Formázd a következő formában:
'€134.89'
Adott szám:
salary: number = 134.89;
Formázd a következő formában:
'$134.890'
Adott szám:
salary: number = 134.89;
Formázd a következő formában:
'$0,134.8900'
Adott szám:
salary: number = 134.89;
Formázd a következő formában:
'this currency is changed 134.89'
