Angular: what is OnPush ChangeDetectionStrategy?

Angular’s change detection is pretty straight forward out of the box and, to some extend, it has a pretty optimized algorithm, however, it’s not optimized by default. Let’s see how it works first

What is change detection in Angular

Let’s look at the Angular docs for the definition then let’s break it down and explain it.

Angular change detection is a built-in framework feature that ensures the automatic synchronization between the data of a component and its HTML template view.

The above definition basically means that if I change something in the model I see that change in the browser. Pretty straight forward, right? The keyword in the definition above is “automatic”, but what does this automatic actually mean.

In Angular, each component has its own ChangeDetectionRef assigned to it which is responsible for detecting changes and triggering the view update. When Angular runs its change detection cycle to check for changes it actually checks ALL the components in the app from top to bottom and if a change is detected in a component it instructs the ChangeDetectionRef for that component that a change occurred and the view is to be updated.