change detection in angular code example
Example 1: when does change detection get triggered in angular
In summary,
Default:
- Any property.
- Any template bound event.
On push:
- Any @Input property only.
- Any template bound event.
Other triggers:
- Any event Callback.
- Network Call (XHR).
- Timers (setTimeout, setInterval).
- You can explicitly call CD.
- Async pipe still calls CD regardless.
Notes:
- Tree is checked top-down when CD fires. Parent nodes may stop propagation!!
- Strategy can be changed to on push at any time, usually for performance reasons.
- NGZone is used to patch native APIs to listen for CD.
Example 2: angular change detection
A: AfterContentInit
A: AfterContentChecked
A: Update bindings
B: AfterContentInit
B: AfterContentChecked
B: Update bindings
C: AfterContentInit
C: AfterContentChecked
C: Update bindings
C: AfterViewInit
C: AfterViewChecked
B: AfterViewInit
B: AfterViewChecked
A: AfterViewInit
A: AfterViewChecked<>Copy