angular change detection trigger code example

Example 1: what triggers angular change detection

In summary,

Default:
- Any property.
- Any template bound event.

On push:
- Any @Input property only.
- Any template bound event.

Other triggers:
- Event Callbacks.
- 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: 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.

Tags:

Misc Example