Detaching the change detector from components

In the previous recipe, we learned how to use the OnPush strategy in our components to avoid Angular change detection running unless one of the @Input() bindings has changed. There is, however, another way to tell Angular to not run change detection at all, in any instance. This is handy when you want full control on when to run change detection. In this recipe, you'll learn how to completely detach the change detector from an Angular component to gain performance improvements.

Getting ready

The project for this recipe resides in Chapter12/start_here/detaching-change-detecto:

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 to start the Angular app and serve it on the browser. You should see the app, as follows:

Figure 12.5 – App detaching-change-detector running at http://localhost:4200...