How can we combine multiple built-in pipes in Angular templates

Question

Can you help me with a code example of How can we combine multiple built-in pipes in Angular templates?

Answer 1

You can combine multiple built-in pipes in a template by chaining them together using the | symbol. Each pipe transforms the data sequentially, passing the output of one pipe as the input to the next.

Syntax:

{{ value | pipe1 | pipe2 | pipe3 }}

Example:

<!-- Chain uppercase and slice pipes -->

<p>{{ 'angular' | uppercase | slice:0:3 }}</p> <!-- Output: ANG -->