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

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

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

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

`export class AppComponent { num: number = 18; }`

## Пример

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

`<div>{{ num | number:'2.1' }}</div>`

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

`<div>18.0</div>`

## Пример

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

`<div>{{ num | number:'2.2' }}</div>`

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

`<div>18.00</div>`

## Пример

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

`export class AppComponent { num: number = 18.67899; }`

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

`<div>{{ num | number:'2.1-2' }}</div>`

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

`<div>18.68</div>`

## Пример

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

`<div>{{ num | number:'3.5-6' }}</div>`

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

`<div>018.67899</div>`

## Пример

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

`<div>{{ num | number:'3.6-8' }}</div>`

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

`<div>018.678990</div>`

## Практические задачи

Дано число:

`num: number = 15;`

Отформатируйте его в следующем виде:

`'015.000'`

Дано число:

`num: number = 12.345;`

Отформатируйте его в следующем виде:

`'0012.345'`

Дано число:

`num: number = 12.345;`

Отформатируйте его в следующем виде:

`'12.3'`

Дано число:

`num: number = 12.345;`

Отформатируйте его в следующем виде:

`'012.34500'`

Дано число:

`num: number = -7.261;`

Отформатируйте его в следующем виде:

`'-007.3'`

Дано число:

`num: number = 100.261923;`

Отформатируйте его в следующем виде:

`'100.9226130'`

Дано число:

`num: number = 100.926613;`

Отформатируйте его в следующем виде:

`'0100.93'`
← →
↑