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'
    }   
  }

Why you should use onPush detection strategy - Part 1

Angular is powerful framework. It gives you various options to write your components.
The simple one - using "Default" change detection strategy:

@Component({
  selector: 'my-app',
  templateUrl: `
   <div>
    <!-- some inner component here -->
    <inner></inner>
   </div>
  `
  // changeDetection not specified - means Default Strategy
})
export class AppComponent  {
  name = 'Angular';
}

"Default Strategy" means angular run change detection check every time he thinks that change is possible. (Changes may come as result of mouse or key events or Ajax requests)
That makes sense - every possibility of change requires careful check if HTML views need to be updated too.
But what if you have a dumb component that gets its data through the "input" property:

@Component({
  selector: 'inner',
  template: `
    
{{name}}
    {{somePublicMethod()}} 
  `
})
export class InnerComponent  {
  @Input() name;
  somePublicMethod() {
    console.log('change check runned'); // will run twice no matter what kind of event happened
  }
}

"somePublicMethod" will run twice no matter what kind of event happened (which is bad in terms of performance)
So, is there any way you can "help" angular not to do any unneeded checks inside this component unless the input data changed?
That is where "onPush" strategy appears very handful:

@Component({
  selector: 'my-app',
  templateUrl: `
   <div>
    <!-- some inner component here -->
    <inner [name]="name"></inner>
    <button (click)="onlyClick()">click to trigger some event</button>
   </div>
  `
})
export class AppComponent  {
  name = 'Angular';

  onlyClick() {
    // nothing changed, but mouse event "click" triggered
  }
}

...

@Component({
  selector: 'inner',
  template: `
    
{{name}}
  `,
  // onPush is used!!!
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class InnerComponent  {
  @Input() name;
}

No change check will be run at "inner" component or its children in response to some event. The only case when check will run - is only when "name" property changed Read more in the next part