Цепочки каналов в Angular

Чтобы применить несколько видов к одному значению, можно воспользоваться цепочками каналов. Для этого прописываем все нужные нам каналы через символ |.

Давайте зададим в классе главного компонента свойство name:

app/app.component.tsexport class AppComponent {
  name: string = 'john d.';
}

В HTML-шаблоне пропишем вывод имени пользователя в верхнем регистре, исключая часть строки ' d.':

app/app.component.html<div>{{ name | uppercase | slice:0:4 }}</div>