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 that triggers with each change detection cycle, this is also not considered a good practice. Imagine that the view depends upon a transformed version of the data using a computation constantly. This would cause a lot of computation and processing for each render cycle. One good technique can be to move the heavy computation using Angular (pure) pipes (especially if the computation happens with each change detection cycle).

Getting ready

The app that we are going to work with resides in start/apps/chapter12/ng-pipes-perf inside the cloned repository:

1. Open the...