Форматирование валюты с помощью канала в Angular

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

<div>{{ value | number : код валюты : отображение валюты : формат числа : код локали }}</div>

Примеры

Давайте попробуем работу канала на примерах. Для этого в классе компонента зададим следующее свойство salary, содержащую зарплату в некоторой валюте:

export class AppComponent {
	salary: number = 867.564;
}

Пример

Давайте преобразуем наше число в валюту:

<div>{{ salary | currency }}</div>

Результат выполнения кода:

<div>$867.56</div>

Пример

Теперь давайте укажем отображение валюты в российских рублях:

<div>{{ salary | currency:'RUB':'code' }}</div>

Результат выполнения кода:

<div>RUB867.56</div>

Пример

Давайте выведем рядом с числом символ российского рубля:

<div>{{ salary | currency:'RUB':'symbol-narrow' }}</div>

Результат выполнения кода:

<div>₽867.56</div>

Пример

Теперь давайте числом с четырьмя цифрами в дробной части:

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

Результат выполнения кода:

<div>RUB867.5640</div>

Пример

Давайте добавим к отображению валюты следующую строку:

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

Результат выполнения кода:

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