Briebug Blog

Sharing our thoughts with the community

How do I manually trigger change detection in Angular?

How do I manually trigger change detection in Angular?


First, why would I want to?

Angular's default change detection strategy may work well for a hobby app or presentation demo but if you're dealing with a large or enterprise application, you're likely going to take a performance hit. That's because by default Angular checks and detects everything rendered in the template. One of the ways we can solve this is by using manual change detection, however, it's not the best way.



Then what is?

True "manual" change detection in Angular would be a combination of the OnPush change detection strategy with methods like detectChanges(), detach(), markForCheck() and others in your components. This can be a great solution if you need full control over change detection. For instance, if you're getting data from a websocket you may want to use detectChanges() to limit how often you're checking for changes. If you don't need full control, however, it can certainly over-complicate things.


By far, the best and simplest way to achieve optimal performance in your Angular application is by using a combination of the OnPush change detection strategy along with immutable data. When OnPush is enabled, Angular will not detect changes by analyzing each template expression. It will only detect changes to @Input values as a whole not the properties of an object, if that input is an object, which is why you should use immutable data. I recommend Immutable.js or a library like NgRx.



How does it work?

Using OnPush, Angular will only check “when notified”. Here are the four scenarios that notify:


1. An @Input reference has changed.

  • This means anytime bound data (an @Input) changes. Angular will compare the object reference, not individual properties. For this reason, immutable data is the way to go. Each time you change your data, you're making a copy with a new object reference.


2. The component or its children raise an event.

  • Raise an event within the component
  • An example:



3. A bound observable in the template changes.

  • {{ myObservable$ | async }}


4. Manual

  • Using detect changes() in a component will immediately run change detection in that component and its children. markForCheck() will temporarily add that component and its children to the default Angular change detection cycle for one cycle.
  • As we've already discussed, this isn't the most elegant option and is probably best to avoid, although it may be acceptable in edge cases.



In Summary

Now you know the differences between default change detection and OnPush change detection in Angular, as well as how to trigger manual change detection. While this is possible, it's likely not the best solution when immutable data and the async pipe are available options.


If you're sold on the OnPush change detection strategy and using the Angular CLI, you can set the component generator schematic to automatically set OnPush as the change detection strategy for newly generated components. Use this command: ng config schematics.@schematics/angular:component.changeDetection OnPush


To learn more, and see one of the best examples I've seen detailing the ramifications of change detection strategies, check out this article written by Minko Gechev.

View Details
- +
Sold Out