Oct 4, 2020

When the change detector of OnPush component of Angular runs?

There are lots posts about how change detector works in Angualr. But I can't find a simple answer about when the change detector runs in OnPush components. I assume you understand how change detection works. If not , here is what you need to know. Angular modify DOM api, if an api trigger an exection of angular function, angular change detection cycle kick off. An angular application is a component tree. Each component will has its own change detector. The change detection start from the root components' change detector, all the way to the bottom component's change detector, asking them to detect change inside their components. By default, all change detectors will detect accordingly, unless the a change detector is manually detached by developer or it belongs to an OnPush component.

Here is a diagram shows when the change detector of OnPush component of Angular runs.

Change Detection Cycle start
Change Detection...
Is the trigger of Change Detection above (not inside or under) of the component?
Is the trigger of Change Det...
No
No
Yes
Yes
Is the @input reference changed
Is the @input refere...
The detector runs
The detector runs
Do nothing
Do nothing
Is the trigger setTimeout
setInterval
promise.resolve
http
Is the trigger setTim...
No
No
Yes
Yes
No
No
Yes
Yes
When Does the change detector of OnPush component run?
When Does the change detector of OnPush component run?
Viewer does not support full SVG 1.1

OnPush component does not change what can trigger change detection cycle. It does not when change detection cycle kicks off. It does not change how its parent's change detector runs, and it does not change how its children detector runs. It changes when the its and only its change detector runs. If you are an author of a component, and the component use @Input properties, and you will see there will be lots instance of this component in your application, and also there are lots binding in your component, it will make the performance better to mark the change detection strategy "OnPush" . Otherwise, the default change detection stragegy works just fine.

No comments:

Post a Comment