CODEWITHSUNDEEP
angulareventsoptimizationangular-changedetection
Manuszep
Manuszep

Reputation: 823

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 ?

Upvotes: 3

Views: 1170

Answers (2)

slim
slim

Reputation: 503

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.

enter image description here

Upvotes: 1

k3cman
k3cman

Reputation: 16

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.

Upvotes: 0

Related Questions