OnPush — your new Default

Angular has two modes for change detection. Default and OnPush. In this article we will explore how you can safely use OnPush with no extra effort and why you should.

Recap

Angular uses Zone.js to help track changes. It patches lots of native things, such as addEventListener, MutationObserver, setTimeout and others. Whenever such events happen, a thing called “tick” follows. Angular registers that it has to check the app for changes. The app is broken into a tree of views, each view having its own change detection strategy. A gif below illustrates what happens to your app with Default strategy when user clicks a button:

In OnPush strategy, change detection only propagates up the view tree from the current view to the topmost. That’s it in a nutshell.

OnPush

In any reasonably big app Default strategy starts to suffer from performance issues. I’m usually the first person to say do not overoptimize stuff. Start with bottlenecks. But even if your app does not…