What is CD?

The basic mechanism of the change detection is to perform checks against two states, one is the current state, the other is the new state. If one of these states is different of the other, then something has changed, meaning we need to update (or re-render) the view.

How CD flows?

Change detection goes through every components in the component tree (from top to bottom) to check if the model it depends on changed;

What difference between CD strategies?

Note:
Examples in further slides will contain either all components as ChangeDetectionStrategy.Default (Default)
or all as
ChangeDetectionStrategy.OnPush (OnPush)

Components that have been re-rendered will be highlighted with green

CD propagation

Change detection will be propagated to the root parent component and call changed detection in child components. Note that event handler is required for CD

What triggers CD?

CD of events
(child4)

Note that child 4 has a click handler

CD of timeout/interval
(any component)

 markForCheck OR | async  (child4)

 detectChanges 
(Main B)

 detectChanges and @Input
(Main B and child3 @Input)

Note child 3 @Input should be changed to trigger CD

 Demos

Presentation demo app

More advanced demo apps

Thanks for your attention