@HostListener cause change detection triggers too many times when I'm listening for outside click

Short answer - That is by design.

Since we have a click handler, angular triggers change detection after handler been called.

So, when the first component handles click it cause change detection. Then all the components print "checked".

And that repeated for each component, so I've got 9^2 prints "checked."

And one additional note that OnPush strategy will not help to reduce an amount of prints.


@Hostlistener can be costly. Check my answer here to minimize the effect and improve performance. Detect click outside Angular component