angular @input change detection 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