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.