2

Consider this plunker

Grandchild Component

<button (click)="back2click()"></button>

@Input() from2;
@Output()
back2 = new EventEmitter<any>();

back2click() {
   this.back2.emit('hi');
}

Child Component

changeDetection: ChangeDetectionStrategy.OnPush,

<my-app-n2 [from2]="from1" (back2)="handleback2($event)"></my-app-n2>

@Input() from1;
@Output() back1 = new EventEmitter<any>();

handleback2() {
    this.back1.emit('hi')
}

Parent Component

<my-app-n1 [from1]="from" (back1)="handleback1($event)"></my-app-n1>
handleback1 () {
    this.from.name = 'handline4';
}

I see that when button is clicked

back2click -> emit -> handleback2 -> emit -> handleback1 
    -> attribute is updated -> all child view are updated

This is confusing since I expect only the parent view to get updated since changeDetection: ChangeDetectionStrategy.OnPush, is config in child component.

I think I am missing something, can someone point me the right direction?

Thanks

Jal
  • 2,174
  • 1
  • 18
  • 37

1 Answers1

1

All native events mark the path to the root component for check once. Here in the template of Grandchild Component you're using native click event:

<button (click)="back2click()"></button>

Hence the hierarchy of components is marked for the check once.

   Root Component -> ViewState.ChecksEnabled = true
     |
    ...
     |
   Parent  -> ViewState.ChecksEnabled = true
     |
     |
   Child  (onPush)  -> ViewState.ChecksEnabled = true
     |
     |
   Grand child (event triggered here) -> markForCheck() -> ViewState.ChecksEnabled = true

For the most comprehensive explanation of change detection read:

To learn more about markForCheck see this answer and read this article:

Max Koretskyi
  • 101,079
  • 60
  • 333
  • 488
  • so if the view is changed, why is `ngOnChange` not called? Does `checksEnabled = true ` not call `ngOnChange` ? – Jal Oct 19 '17 at 21:54
  • @Jal, these are unrelated. `ngOnChanges` is only called when Angular checks **parent** component **if** the input binding has changed. In your case it hasn't changed. And the view is updated when the **current** component being checked. – Max Koretskyi Oct 20 '17 at 05:33