Search code examples
angularangular-changedetection

Why does Angular trigger ChangeDetection on parent components on DOM events despite OnPush strategy?

Trick question I haven't found any answer in the documentation yet.

A change detection cycle is triggered when AppRef.tick() is beeing called (mostely by the NgZone patches). It goes from the root component at the top of the tree to the bottom passing by :

  • every components with Default strategy
  • every components marked by markForCheck (and their ancestors)

And skipping non-marked OnPush components.

But why, when a event is fired by a component, all its ancestors will also be checked ? As if markForCheck were called.

I was expecting the same behavior as when AppRef.tick is called. It doesn't make sense to me why OnPush parents are being checked. That behavior can well be seen on this demo.

Please also see a working illustration on stackblitz

Solution

  • I needed to dive deep into the code of Angular to understand what was happening.

    Angular wraps every event listener using wrapListener(). This method is responsible for calling markViewDirty when an event is fired.

    This particular method markViewDirty, is also the one called by markForCheck.

    So this means, every event within the inner-zone is expected to trigger CD on parent components (marked as dirty + tick() triggered).