Change detection and OnPush strategy

Usage

  • Open Console from DevTools
  • Click on app tabs, tryout examples

Example will show animation and logs. You can reload the example and change the speed of animation. Every button click in example will reset the animation/logs.

Legend

Card colors

Indicates "DoCheck" cycle for component
Indicates "OnChanges" cycle for component
Indicates "Render" for component

Logs

Will be shown in Console panel, showing each step for easier tracking and expose details of cycles.

References

Some of these articles can provide more insights on all the Angular pieces that are involved in change detection with OnPush strategy.

  • Angular:Unidirectional data flow(link)
  • Angular:View hierarchy(link)
  • Deepak Pandey:Understanding Angular Views(link)
  • Angular:Change detection(link)
  • Netanel Basal:Guide to Angular onPush Change Detection(link)