Angular (click) events triggers host component re-rendering

Issue

While trying to reduce useless component renders in an application I noticed Angular triggers changeDetection on click events, even for components with ChangeDetectionStrategy.OnPush

I've made a minimal example to reproduce the issue: stackblitz

Is there a way to limit renderings only on Input changes or async pipes updates ?

Solution

If you call function in template it will get called each time Change Detection is triggered. This is considered very bad practice and you should avoid it at all cost. (Do a quick google on the topic, there are a lot of resources explaning this more into details)

The proper way to check when the component is rerendered you should use lifecycle hooks for instance ngOnChanges.

Answered By - k3cman