Does the detection of change in angular2 always start in the root component?

advertisements

Consider the following component tree structure in Angular2

     A
  B     C
D  E   F  G

If G emits an event via click to C and C does not further that event

html

<div (click)="update($event)"></div>

component

@Output() myOutputName = new EventEmitter();

update(event) {
    this.myOutputName.emit('some vlaue');
}

Does the Change detection runs in all nodes starting from A or does change detection start on C and effect only F and G ?


YES, CHANGE DETECTION ALWAYS STARTS FROM ROOT COMPONENT

slide - http://pascalprecht.github.io/slides/angular-2-change-detection-explained/#/54

Data always flows from top to bottom, is because change detection is also always performed from top to bottom for every single component, every single time, starting from the root component

So if G emits an event,

change detection will start from root component,

A                       (change detection in A)

B      C                  (change detection in B,C)

D    E      F    G           (change detection in D,E,F,G)

Keep in mind, there are ways to deal with change detection.

But Yes BY DEFAULT, change detection starts from Root

For further reference,

article
1) http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html
2) http://victorsavkin.com/post/110170125256/change-detection-in-angular-2