Change Detection in Angular2
Posted By : Manisha Kirodiwal | 28-Jan-2018
The basic task for changing detection is to take the internal status of an application and make it visible in some way for the user interface. This status can be any kind of objects, arrays, primitives, ... just any kind of JavaScript data structures.
This status can end up as dots, forms, links or buttons in the user interface and specifically on the internet, the Document Object Model (DOM). So basically we take data structures as input and generate DOM output to show it to the user. We call this process rendering.
However, it becomes more difficult when a change takes place at runtime. Sometime later when the DOM has already been rendered. How do we find out what has changed in our model and where should we update the DOM?
This can be tackled in many different ways. For example, one way is simply making an HTTP request and rendering the entire page again. Another approach is the concept of narrowing the DOM of the new state with the previous state and making only the difference,
So basically the goal of change detection is always projecting data and its change.
Who notifies Angular?
somewhere in Angular’s source code, there’s this thing called ApplicationRef, which listens to NgZones onTurnDone event. Whenever the event is fired, it accomplishes a tick() function which actually performs change detection.
// very simplified version of actual source class ApplicationRef { changeDetectorRefs:ChangeDetectorRef[] = []; constructor(private zone: NgZone) { this.zone.onTurnDone .subscribe(() => this.zone.run(() => this.tick()); } tick() { this.changeDetectorRefs .forEach((ref) => ref.detectChanges()); } }
Change Detection
in Angular, each component has its own change detector so the logical result is that we’re having a change detector tree too.
change detection is also always performed from top to bottom for each individual part, each time starting from the root component. This is great because unidirectional data stream is more predictable than cycles. We always know where the data we use comes from in our views because it can only come out of the component.
Another interesting observation is that change detection becomes stable after a single pass. This means that if one of our components causes additional changes after the first run during the detection of changes, Angular will cause an error.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Manisha Kirodiwal
Manisha is a Web Application developer and she is good in working with Angular, TypeScript , JavaScript and Jquery. In free time she loves to dance and cooking.