Why does attribute change still cause the @Input to be change in ngDoCheck when change detection is on push?

Question

Consider this plunker

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'my-app-n1',
  template: `
    <my-app-n2 [from2]="from1"></my-app-n2>
    <div>
      {{from1.name}}
      <input type="button" value="n1"  (click)="changen1()">
    </div>
  `,
})
export class App2 {

  @Input() from1;

  ngDoCheck() {
    console.log('do check 1 ', this.from1);
  }

  ngOnChanges(changes: any) {
    console.log('n1 change ', changes);
  }  
  changen1() {
    this.from1 = {'name': 'name1-2'}
  }
}

@Component({
  selector: 'my-app',
  template: `
    <my-app-n1 [from1]="from"></my-app-n1>
    <input type="button" value="root" (click)="changen0()">
  `,
})
export class App {
  from: any;
  constructor() {
    this.from = {'name': 'name0'}
  }

  ngOnChanges(changes: any) {
    console.log('n0 change ', changes);
  }  

  changen0() {
    this.from.name = 'name-0-2-2'
  }

}

Notice that App2 uses ChangeDetectionStrategy.OnPush

When changen0 is clicked I expect ngOnChanges to not be called (since no new reference is assigned) and ngDoCheck to be called with this.from1 to have the data {'name': 'name0'} and the view still displaying name0

But instead

ngDoCheck is called with this.from1 equal {'name': 'name-0-2-2'}

and the view is displaying name0

My question is the following

Why is the property this.from1 changed?
And if the model is changed why is the view inconsistent with the model?

it's the same reason as in your [previous question here](https://stackoverflow.com/questions/46822276/why-changedetectionstrategy-onpush-does-not-update-in-input-attribute-change-bu/46823249#46823249), do not use native DOM events when testing OnPush, better use `setTimeout` to simulate a change — Max Koretskyi, Oct 19 '17 at 05:35
its slightly different though, since in this case the view will not be changed, what is the reason for the discrepancy? — Jal, Oct 19 '17 at 05:46
I posted my answer. Let me know if there's something unclear in this or the other answer. — Max Koretskyi, Oct 19 '17 at 06:35

score 1 · Accepted Answer · answered Oct 19 '17 at 06:34

You're using ChangeDetectionStrategy.OnPush for the App2 which means that CD will not be triggered for App2 unless the input binding [from1]="from" is updated.

So when you update the name property here the name is updated:

changen0() {
    this.from.name = 'name-0-2-2'
}

you don't update the reference to this.from and hence change detection is not triggered for the App2 so you don't see the change in the HTML. ngOnChanges is not called as well.

ngDoCheck is called with this.from1 equal {'name': 'name-0-2-2'}

ngDoCheck doesn't mean your component being checked. It's called when Angular checks the parent component. Read this article for more information:

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

Why does attribute change still cause the @Input to be change in ngDoCheck when change detection is on push?

1 Answers1