CODEWITHSUNDEEP
javascriptangulardata-binding
Sasank Sunkavalli
Sasank Sunkavalli

Reputation: 3964

How does optimised data binding mechanism work in Angular2

I know data binding concept in AngularJs is a naive dirty checking mechanism. In the Google I/O videos , they have said that, they optimized the data binding/change detection in Angular2. How does it work in Angular2

Upvotes: 0

Views: 149

Answers (1)

Kamil Myśliwiec
Kamil Myśliwiec

Reputation: 9168

Application state change can be caused by:

  • Events,
  • XHR - Fetching data,
  • Timers - setTimeout(), setInterval()

They are all asynchronous.

So how Angular 2 know, when to run change detector? Because of Zones. There you can read more about it:

http://blog.thoughtram.io/angular/2016/02/01/zones-in-angular-2.html http://blog.thoughtram.io/angular/2016/01/22/understanding-zones.html

Zones have lifecycle events. ApplicationRef is listening zones onTurnDone event. Whenever this event is fired, it executes a tick() function which start change detection.

All components in Angular 2 have their own Change Detector (so it looks like component tree - from top to bottom). Change Detector is comparing variables references and if references do not changed, CD checks properties (if variable is an object).

There is really awesome article about that:

http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

Upvotes: 1

Related Questions