Using OnPush change detection to prune component subtrees

In today's world of modern web applications, performance is one of the key factors for a great user experience (UX) and, ultimately, conversions for a business. In this recipe, being the first recipe of this chapter, we're going to discuss the fundamental or the most basic optimization you can do with your components wherever it seems appropriate, and that is by using the OnPush change-detection strategy.

Getting ready

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

1. Open the project in Visual Studio Code (VS Code).
2. Open the terminal and run npm install to install the dependencies of the project.
3. Run the ng serve -o command to start the Angular app and serve it on the browser. You should see the app, as follows:

Figure 12.1 – App using OnPush change detection running at http://localhost...