I am creating a component that can render overlays with given template at given static position, or relative-to-component position strategy.

The hierarchy looks like this:

The component that renders the overlays is located at the bottom of AppComponent, which is basically a list of overlay objects and it renders the list.

When I insert a new element to the array of overlays, no matter from where, it triggers a change detection to AppComponent even though it doesn’t need to trigger any detection.

If I use OnPush on AppComponent it will prevent it, but then I need to manage change detections by myself down the tree and I don’t want to do it.

For a demo, I created a stackblitz with 1 page called TestComponent that implements DoCheck to see if change detection was triggered, and in the OverlaysComponent I added a setTimeout that runs outside of angular with NgZone and adds a new element to the array within angular using NgZone#run.

When I add the element to the list, I get DoCheck console logs from the TestComponent. Even if I run it all outside of angular and call cdr.detectChanges it will trigger the same DoCheck event.

Stackblitz Link Here

Is that how it supposed to be?

https://angular-live-compiler-jk8dsa.stackblitz.io