Форматиране на валута с помощта на pipe в Angular

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

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

Примери

Нека изпробваме работата на pipe-а с примери. За целта в класа на компонента задаваме следното свойство 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>