'Angular (click) events triggers host component re-rendering
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 1:[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.
Solution 2:[2]
ChangeDetectionStrategy.OnPush does not prevent CD cycles to be triggered, it has just an influence on whether a component is actually checked during a CD cycle.
If you want to prevent CD to be triggered by a click event, you can configure zone.js. Take a look into your polyfills.ts file, there is a comment that explains how to do it. I have no experience with this myself though, and I am also not sure if this what you want to achieve, because it then applies to the whole application.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | k3cman |
| Solution 2 | slim |