Why you should use onPush detection strategy - Part 2

In the previous part you saw that "onPush" change detection strategy option - used for prevent angular to run the checks in vain (when no change which can affect the component made). Only when the thing that changed is the value passed to the component through input - the change detection will run, and reflect the change at HTML.

export class AppComponent  {
  name = 'Angular';
  onChangeNameClick() { 
    this.name = 'Angular the awesome'; // change the "name" which passed to inner
  }
}

Objects

But what about values which are not strings (like in example), but objects?
Lets say we have inner component that suppose to display selected product, When user clicks the "selectProduct" button - the new product should be displayed at inner component:

export class AppComponent  {
  product = {
    model: 'GSX1000R',
    manufacturer: 'Suzuki'
  };
  selectProductClick() { // nothing will change at inner component
    this.product.model = 'Z900';
    this.product.manufacturer = 'Kawassaki';
  }
}

As you can see - nothing changes at inner component after the click. But why?
The answer is - that angular consider the the input value changed only when object reference changed. In other words - the change will apply only when input value will receive new different object:

  selectProductCorrectClick() { // will display the change because reference changed
    this.product = {
      model: 'Z900',
      manufacturer: 'Kawassaki'
    }   
  }