Angular 2, 4 — Visualizing Change Detection (Default vs OnPush)by@guptagaruda
9,591 reads
9,591 reads

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

by Gupta Garuda2mAugust 27th, 2017
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

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.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - Angular 2, 4 — Visualizing Change Detection (Default vs OnPush)
Gupta Garuda HackerNoon profile picture
Gupta Garuda

Gupta Garuda

@guptagaruda

L O A D I N G
. . . comments & more!

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite