Moving heavy computation to pure pipes

In Angular, we have a particular way of writing components. Since Angular is heavily opinionated, we already have a lot of guidelines from the community and the Angular team on what to consider when writing components—for example, making HTTP calls directly from a component is considered a not-so-good practice. Similarly, if we have heavy computation in a component, this is also not considered a good practice. And when the view depends upon a transformed version of the data using a computation constantly, it makes sense to use Angular pipes. In this recipe, you'll learn how to use Angular pure pipes to avoid heavy computation within components.

Getting ready

The project we are going to work with resides in Chapter12/start_here/using-pure-pipes, inside the cloned repositor:

1. Open the project in VS Code.
2. Open the terminal and run npm install to install the dependencies of the project.
3. Run the ng serve -o command...