Angular (click) events triggers host component re-rendering

Question

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 ?

Answer 1

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.