Angular 2 change detection mechanism

Question

I m studying Angular 2 change detection and I'm having some trouble, or at least, I need to some explanations.

Let's get the following simplified code from AppRef (and from Througtram blog) :

class ApplicationRef {

  changeDetectorRefs:ChangeDetectorRef[] = [];

  constructor(private zone: NgZone) {
    this.zone.onTurnDone
      .subscribe(() => this.zone.run(() => this.tick());
  }

  tick() {
    this.changeDetectorRefs
      .forEach((detector) => detector.detectChanges());
  }
}

We can assume that there's one changeDetector by component. I'm assuming too that there is only one Zone.js fork used in one angular 2 application.

From now, let's get the code implementation of detectChanges, where there is a comparison such as (simplified) :

detectChanges(){
  //...
 if(this.previousValue !== newValue){
   this.previousValue = newValue
 }

}

From that point, knowing that only one Zone.js fork will trigger all the events and then start a changeDetection cycle, does it mean that all the detectors from all the component tree will be concenered by this comparison ? I mean, if I have 1000 components, will I'have 1000 calls to detectChanges ?

Thanks for your help

Answer 1

Basically yes, Angular compares every binding from top to bottom on each change detection cycle.

This is why there is ChangeDetectionStrategy.OnPush which allows to skip checking components (and its child/descendant components and directives) when no input property was changed for this component.