Change Detection in Angular2

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.