Formatarea valutei folosind pipe în Angular
Cu ajutorul pipe-ului CurrencyPipe se poate
formata afișarea valutei. În primul
parametru al pipe-ului se transmite codul valutei
conform specificației ISO 4217 (în mod
implicit USD). În al doilea parametru setăm
afișarea valutei. Ea poate lua
următoarele valori: 'code' (codul
valutei), 'symbol' (simbolul acesteia),
'symbol-narrow' (pentru țările care au
mai multe simboluri valutare), 'string'
(pentru afișarea oricărui șir de caractere). În al treilea
parametru opțional putem seta
formatul numărului, similar cu pipe-ul DecimalPipe.
În al patrulea parametru opțional se poate
specifica codul localității utilizate:
<div>{{ value | number : cod valuta : afișare valuta : format numar : cod localitate }}</div>
Exemple
Să încercăm funcționarea pipe-ului pe exemple.
Pentru aceasta, în clasa componentului setăm
următoarea proprietate salary, care conține
salariul într-o anumită valută:
export class AppComponent {
salary: number = 867.564;
}
Exemplul
Să transformăm numărul nostru în valută:
<div>{{ salary | currency }}</div>
Rezultatul executării codului:
<div>$867.56</div>
Exemplul
Acum să specificăm afișarea valutei în ruble rusești:
<div>{{ salary | currency:'RUB':'code' }}</div>
Rezultatul executării codului:
<div>RUB867.56</div>
Exemplul
Să afișăm lângă număr simbolul rublului rusesc:
<div>{{ salary | currency:'RUB':'symbol-narrow' }}</div>
Rezultatul executării codului:
<div>₽867.56</div>
Exemplul
Acum să setăm numărul cu patru cifre în partea fracționară:
<div>{{ salary | currency:'RUB':'symbol':'2.4-5' }}</div>
Rezultatul executării codului:
<div>RUB867.5640</div>
Exemplul
Să adăugăm la afișarea valutei următorul șir de caractere:
<div>{{ salary | currency:'RUB':'this is a new currency - ' }}</div>
Rezultatul executării codului:
<div>this is a new currency - 867.56</div>
Probleme practice
Este dat numărul:
salary: number = 134.89;
Formatați-l în următoarea formă:
'$134.89'
Este dat numărul:
salary: number = 134.89;
Formatați-l în următoarea formă:
'€134.89'
Este dat numărul:
salary: number = 134.89;
Formatați-l în următoarea formă:
'$134.890'
Este dat numărul:
salary: number = 134.89;
Formatați-l în următoarea formă:
'$0,134.8900'
Este dat numărul:
salary: number = 134.89;
Formatați-l în următoarea formă:
'this currency is changed 134.89'