Channel chains in Angular

To apply several types to one value, you can use channel chains. To do this, we write all the channels we need through the symbol |.

Let's define the name property in the main component class:

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

In the HTML template, we will write the output of the user name in uppercase, excluding the part of the string ' d.':

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