angular - Change Detection issue -- Why is this changing when it's the same object reference with On Push

Question

I thought I was pretty clear on how Angular Change detection works after this discussion: Why is change detection not happening here when [value] changed?

But take a look at this plunk: https://plnkr.co/edit/jb2k7U3TfV7qX2x1fV4X?p=preview

@Component({
selector: 'simple',
  template: `
    <div (click)="onClick()">
      {{myData[0].name}}
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class Simple {
  public @Input() myData;
  constructor() {
  }
  public onClick() {

  }
}

Click on a, it's changed to c

I understand that the click event triggers change detection on the App level, but [myData]="testData" is still referring to the same object, and I am using On Push on Simple, why does a get changed?

Answer 1

That's by design.

If you have component with OnPush change detection then its detectChangesInternal function won't be triggered unless one of four things happens:

1) one of its @Inputs changes

~2.4.x

~4.x.x

Note: @Inputs should be presented in template. See issue https://github.com/angular/angular/issues/20611 and comment

2) a bound event is triggered from the component (that is your case)

Caveats: There is some difference here between 2.x.x and 4

Angular ChangeDetectionStrategy.OnPush with child component emitting an event

~2.4.x

~4.x.x

3) you manually mark the component to be checked (ChangeDetectorRef.markForCheck())

4) async pipe calls ChangeDetectorRef.markForCheck() internally

private _updateLatestValue(async: any, value: Object): void {
  if (async === this._obj) {
    this._latestValue = value;
    this._ref.markForCheck();
  }
}

https://github.com/angular/angular/blob/2.4.8/modules/%40angular/common/src/pipes/async_pipe.ts#L137

---

In other words if you set OnPush for component then after the first checking component's status will be changed from CheckOnce to Checked and after that it's waiting as long as we do not change status. It will happen in one of three things above.

See also:

• https://github.com/angular/angular/issues/11678#issuecomment-247894782

There are also good explanations of how angular2 change detection work:

• https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html
• https://hackernoon.com/everything-you-need-to-know-about-change-detection-in-angular-8006c51d206f

Here is Live Example(Thanks to Paskal) that explains onPush change detection. (Comp16 looks like your component. You can click at this box).