Web Performance

Angular Performance: 5 OnPush Change Detection Case Studies

Tips on switching from default to OnPush change detection

Photo by Siora Photography on Unsplash.

If you search for “Angular change detection,” you will find a lot of articles that have a lot in common. In this article, we are not going to explain how the zone library works or how the Angular change detection mechanism is implemented under the hood. What we will see are five real-world cases of switching from the default to the OnPush change detection strategy in an Angular app to optimize its performance.

As you may already know, OnPush change detection cannot be used out of the box. You have to consider the immutability of your data structure and adjust the code design and the interaction between your components. To gain a clearer understanding, we will apply this in today’s article by analyzing and adjusting five Angular components designed in different ways.

Case Study 1: Container Component

Container components are smart components. They communicate with services, routers, and stores. They know which services to call and take care of retrieving data from them. Here is an example:

InvoicesContainerComponent reads three properties (two observables and an array) from InvoiceStoreService, then communicates them to a child presentational component (invoices-ui) through data bindings in the template:

• displayColumnDefs is a readonly property defined in the store service. We don’t need to worry about detecting a new value from it since it does not change once we initialize it.
• notification$ and dataList$ are observables that emit new values depending on the user interaction with the…