Pipes

Pipes представляют специальные инструменты, которые позволяют форматировать отображаемые значения. Например, нам надо вывести определенную дату:

import { Component } from '@angular/core';

@Component({
  selector: 'test-pipes',
  template: `<p>Date {{ birthday }}</p>
             <p>Date with pipe {{ birthday | date }}</p>`
})
export class PipesComponent {
  publiv birthday = new Date(1988, 10, 15); // Oct 15, 1988
}

Здесь создается дата, которая дважды выводится в шаблоне. Во втором случае к дате применяется форматирование с помощью класса DatePipe.

Все пайпы применяются через |.

Встроенные pipes

В Angular есть ряд встроенных pipes. Все их можно найти в документации. Основные из них:

• CurrencyPipe: форматирует валюту

• PercentPipe: форматирует проценты

• UpperCasePipe: переводит строку в верхний регистр

• LowerCasePipe: переводит строку в нижний регистр

• DatePipe: форматирует дату

• DecimalPipe: задает формат числа

• SlicePipe: обрезает строку

При применении классов суффиксPipe отбрасывается (за исключением DecimalPipe - для его применения используется название number).

ВАЖНО

В angular 2 больше нет FilterPipe илиOrderByPipe. Вы можете написать их сами, но это сильно ухудшит производительность.

Параметры в pipes

Pipes могут получать параметры. Например, пайп SlicePipe, который обрезает строку, может получать в качестве параметра, начальный и конечный индексы подстроки, которую надо вырезать:

<div>{{welcome | slice:3}}</div>
<div>{{welcome | slice:6:11}}</div>

Все параметры в пайп передаются через двоеточие. В данном случае slice:6:11 вырезает подстроку, начиная с 6 до 11 индекса. При этом, если начала выреза строки обязательно передавать, то конечный индекс необязателен. В этом случае в качестве конечного индекса выступает конец строки.

Добавим формат даты:

<p>Date {{ birthday }}</p>
<p>Date with pipe {{ birthday | date:"MM/dd/yy" }}</p>

Цепочки pipes

Вполне возможно, что мы захотим применить сразу несколько pipes к одному значению, тогда мы можем составлять цепочки выражений, разделенные вертикальной чертой:

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<div>{{message | slice:6:11 | uppercase}}</div>`
})
export class AppComponent { 

    public message = "Hello World!";
}