Manipulating data with pipes

Pipes allow us to filter and funnel the outcome of our expressions on a view level. They take data as input, transform it into the desired format, and display the output in the template. To better understand it, think of it like transforming a donkey into a unicorn:

Figure 4.2 – Conceptualized pipe transformation

The donkey may look like a unicorn, but it is always a donkey. That is, the transformation is applied only on a view level; the underlying data remains intact in its original form.

The syntax of a pipe is pretty simple, basically consisting of the pipe name following the expression that we want to transform, separated by a pipe symbol (hence the name). Pipes are usually used with interpolation in Angular templates and can be chained to each other. Angular has a wide range of pipe types already baked in:

• The uppercase/lowercase pipes transform a string into a particular case. The following snippet...