Angular 2 change detection

Change detection is the process of detecting component state change. The state of a component is stored and manipulated using the this keyword. Therefore, there is no direct way for Angular 2 to detect when the state changes. So, Angular 2 uses complex algorithms and third-party libraries to detect state changes.

The first thing Angular 2 does for detecting state changes is that it pretends that all the changes happen asynchronously. Then, it uses the zone.js library to monitor browser events, timers, AJAX requests, WebSockets, and other asynchronous things that are supported by zone.js.

Now, whenever any of these asynchronous activities takes place, it checks everything that could change, including object properties and array elements of the this keyword of all the components from the root node; if any change is detected, then the template bindings of the component are updated. Angular 2 doesn't simply re-render the whole component. Instead, it checks for the bindings...