https://angular.love/running-change-detection-preventing-autorun

[giscus[bot]]

https://angular.love/running-change-detection-preventing-autorun

Angular.love - a place for all Angular enthusiasts created to inspire and educate.

https://angular.love/running-change-detection-preventing-autorun

[MPalix86]

I recently migrated a large application from the default change detection strategy to OnPush. This involved manually updating each component to use ChangeDetectionStrategy.OnPush and adding the necessary calls to markForCheck() or detectChanges() where appropriate.

The application makes heavy use of libraries like ECharts and Leaflet, which rely on native browser events. This made my case ideal for testing the claims in the article I was referencing.
To evaluate the change detection behavior, I used ngDoCheck inside components that integrate ECharts or Leaflet. Based on my observations, using OnPush proved to be more efficient than running code outside Angular using NgZone.runOutsideAngular().

This is because OnPush doesn’t trigger change detection for native browser events (like those used by ECharts and Leaflet), similar to what happens when running code outside Angular.
Therefore, the real advantage of using runOutsideAngular() is mostly relevant if you want to keep the default change detection strategy while still avoiding the performance overhead caused by these libraries.