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

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