Chaining pipes

We can chain multiple pipes together. This particularly helps in scenarios where we need to associate more than one pipe that needs to be applied, and the final output will be transformed with all the pipes applied.

The workflow or chains will be triggered and apply the pipes one after another. An example of the chain pipe syntax is given as follows:

{{today | date | uppercase | slice:0:4}}

We applied two chain pipes in the preceding code. First, DatePipe is applied to the today variable, and just after that, the uppercase pipe is applied. The following is the entire code snippet for ChainPipeComponent:

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

@Component({
 template: `
 <h5>Chain Pipes</h5>
 <p>Month is {{today | date | uppercase | slice:0:4}}
 `,
})
export class ChainPipeComponent {
 today = new Date();
}

We have used the slice to show only the first four characters of the month. The following screenshot shows the output of the preceding component:

Some of the...