Angular 2, 4 — Visualizing Change Detection (Default vs OnPush)

Too Long; Didn't Read

The change detection in Angular framework is unidirectional and top-down (unlike the digest cycles in AngularJS). Whenever an async event like a <a href="https://hackernoon.com/tagged/dom" target="_blank">DOM</a> event, timer callback, XHR handler gets triggered, application code normally updates the state(or model) in these callbacks. Angular with the help of zone.js detects these async events and automatically kicks in the change detection(<a href="https://blog.angularindepth.com/do-you-still-think-that-ngzone-zone-js-is-required-for-change-detection-in-angular-16f7a575afef" target="_blank">*</a>). It checks for the state changes traversing the UI tree starting from the root component and makes the necessary DOM updates to reflect the updated state. State can be of any <a href="https://hackernoon.com/tagged/data-structure" target="_blank">data structure</a> (arrays, sets, <a href="https://github.com/angular/angular/issues/2246" target="_blank">maps</a>, objects, primitives) that is wired up as property bindings in the component templates.