CODEWITHSUNDEEP
angular
techguy2000
techguy2000

Reputation: 5161

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

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?

Upvotes: 10

Views: 3295

Answers (1)

yurzui
yurzui

Reputation: 214007

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 enter image description here

~4.x.x enter image description here

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 enter image description here

~4.x.x enter image description here

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:

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

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

Upvotes: 20

Related Questions