Форматирање на валута со употреба на цевка во Angular

Со помош на цевката CurrencyPipe може да се форматира приказот на валута. Во првиот параметар на цевката се пренесува кодот на валутата според спецификацијата ISO 4217 (по стандард USD). Вториот параметар го одредува приказот на валутата. Тој може да ги има следниве вредности: 'code' (код на валутата), 'symbol' (нејзин симбол), 'symbol-narrow' (за земји кои имаат повеќе симболи на валута), 'string' (за приказ на било кој стринг). Во третиот незадолжителен параметар може да се зададе форматот на бројот, слично на цевката DecimalPipe. Во четвртиот незадолжителен параметар може да се наведе кодот на користената локала:

html<div>{{ value | number : код на валута : приказ на валута : формат на број : код на локала }}</div>

Примери

Ајде да ја испробаме работата на цевката со примери. За таа цел во класата на компонентата да зададеме следното својство salary, кое содржи плата во одредена валута:

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

Пример

Ајде да го трансформираме нашиот број во валута:

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

Резултат од извршувањето на кодот:

html<div>$867.56</div>

Пример

Сега ајде да го наведеме приказот на валутата во руски рубљи:

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

Резултат од извршувањето на кодот:

html<div>RUB867.56</div>

Пример

Ајде да го прикажеме симболот на руската рубља покрај бројот:

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

Резултат од извршувањето на кодот:

html<div>₽867.56</div>

Пример

Сега ајде да го прикажеме бројот со четири цифри во дробниот дел:

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

Резултат од извршувањето на кодот:

html<div>RUB867.5640</div>

Пример

Ајде да додадеме следниот стринг кон приказот на валутата:

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

Резултат од извршувањето на кодот:

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