10

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?

Community
  • 1
  • 1
techguy2000
  • 4,861
  • 6
  • 32
  • 48

1 Answers1

20

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).

yurzui
  • 205,937
  • 32
  • 433
  • 399
  • Look at Live Example – yurzui Feb 18 '17 at 07:42
  • Thanks. The Live Example link is broken. But I actually watched Paskal's talks on youtube before I asked the question. For some reason I missed the part about events triggering the change detection with OnPush components. I was under the impression that the reason for OnPush to be FAST is that it will even ignore the events and only detect the @Input(). I now know my understanding was wrong – techguy2000 Feb 18 '17 at 08:02
  • 1
    I've fixed link – yurzui Feb 18 '17 at 08:03
  • @yurzui, great answer! maybe add [my article link](https://hackernoon.com/everything-you-need-to-know-about-change-detection-in-angular-8006c51d206f) to the post along with Pascal's? :) – Max Koretskyi Apr 21 '17 at 11:57
  • @yurzui will setTimeout inside child component with onPush strategy trigger a change detection cycle? – alt255 Oct 01 '17 at 17:01
  • 1
    @alt255 Nope. You can call `markForCheck` inside `setTimeout` to run change detection cycle – yurzui Oct 01 '17 at 17:13