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

С помощью канала DecimalPipe можно форматировать числа. В первом параметре канала мы передаем минимальное количество цифр в целой части. Во втором параметре указываем минимальное количество цифр в дробной части. В третьем необязательным параметре задаем максимальное количество цифр в дробной части.

Несмотря на то, что наш канал называется DecimalPipe, для его вызова мы пишем так: number.

Давайте попробуем на практике. В классе компонента зададим следующее число:

app/app.component.tsexport class AppComponent {
  num: number = 18;
}

Пример

Давайте выведем наше число так, чтобы в его целой части были две цифры. При этом минимальное количество цифр в дробной части будет составлять 1:

app/app.component.html<div>{{ num | number:'2.1' }}</div>

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

html<div>18.0</div>

Пример

Теперь давайте зададим, чтобы в дробной части нашего числа отображались две цифры:

app/app.component.html<div>{{ num | number:'2.2' }}</div>

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

html<div>18.00</div>

Пример

Давайте зададим новое число:

app/app.component.tsexport class AppComponent {
  num: number = 18.67899;
}

И выведем его в HTML-шаблоне так, чтобы в дробной части отображались максимально две цифры:

app/app.component.html<div>{{ num | number:'2.1-2' }}</div>

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

html<div>18.68</div>

Пример

Теперь отформатируем нашего число так, чтобы в его целой части были три цифры. А в дробной части отобразилось пять цифр:

app/app.component.html<div>{{ num | number:'3.5-6' }}</div>

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

html<div>018.67899</div>

Пример

Давайте попробуем вывести минимальное количество цифр в дробной части, превышающее заданное количество в числе. В нашем случае выведем шесть цифр:

app/app.component.html<div>{{ num | number:'3.6-8' }}</div>

В результате выполнения кода мы увидим, что канал DecimalPipe добавил ноль к дробной части:

html<div>018.678990</div>