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

by

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

More Related Contents:

  1. Angular 2 – how round calculated number?
  2. Angular/RxJS When should I unsubscribe from `Subscription`
  3. Dynamically add event listener
  4. What is the equivalent of ngShow and ngHide in Angular 2+?
  5. I get “Http failure response for (unknown url): 0 Unknown Error” instead of actual error message in Angular
  6. Can’t bind to ‘ng-forOf’ since it isn’t a known native property [duplicate]
  7. Use component from another module
  8. How to use `trackBy` with `ngFor`
  9. Angular: Cannot find a differ supporting object ‘[object Object]’
  10. How to get reference of the component associated with ElementRef in Angular 2
  11. Angular and Typescript: Can’t find names – Error: cannot find name
  12. How to make an angular module to ignore http interceptor added in a core module
  13. Angular 2 restrict input field
  14. How to share data between components using a service properly?
  15. Emit event from parent to child
  16. how to embed an angular app into another app?
  17. How to share service between two modules – @NgModule in angular not between to components?
  18. Angular 6 MatTable Performance in 1000 rows
  19. Firestore Getting documents id from collection
  20. How to set unique template reference variables inside an *ngFor? (Angular)
  21. The pipe ‘ ‘ could not be found angular2 custom pipe
  22. Angular 4 HttpClient Query Parameters
  23. How to reset form validation on submission of the form in ANGULAR 2
  24. Angular2 ngFor OnPush Change Detection with Array Mutations
  25. Angular 4 Lazy loading with named router-outlet not working
  26. angular 6 warning for using formControlName and ngModel
  27. Need BrowserAnimationsModule in Angular but gives error in Universal
  28. Angular 2 disable sanitize
  29. Can I use Angular i18n to translate string literals in typescript code
  30. Angular 2 beta – Select not working (except in Chrome)

Leave a Comment