Why changeDetectionStrategy.OnPush does not update in @Input attribute change but does update @Output trigger attribute change?

Question

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

Answer 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:

• Everything you need to know about change detection in Angular

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

• If you think ngDoCheck means your component is being checked — read this article