What is ChangeDetectionStrategy in Angular2 and when to use OnPush Vs Default?

Use OnPush strategy if your objects are immutable and you don't change the state of the objects in your component. It will perform better rather than default where each change of the object makes run change detector to resolve changes. More or less similar is described in Change Detection Strategy: OnPush

To inform Angular that we are going to comply with the conditions mentioned before to improve performance, we will use the OnPush change detection strategy

The Angular docs said

ChangeDetectionStrategy:

• OnPush means that the change detector's mode will be set to CheckOnce during hydration.

• Default means that the change detector's mode will be set to CheckAlways during hydration.

All above answers explain OnPush and Default, here I post an example about how it really works: https://plnkr.co/edit/hBYb5VOrZYEsnzJQF5Hk?p=preview

user-one.component.ts :

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'user-one',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div>
      <h4>{{ user.name }}</h4>
      <h5>{{ user.age }} years old</h5>
      {{ user.location }} <br />
      {{ user.email }}

      <button (click)="update()">Internal update</button>
      <p>* should not update</p>
    </div>
  `
})
export class UserOneComponent {
  @Input()
  user;

  update() {
    this.user.name = 'Lebron James';
  }
}

user-two.component.ts :

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'user-two',
  changeDetection: ChangeDetectionStrategy.Default,
  template: `
    <div>
      <h4>{{ user.name }}</h4>
      <h5>{{ user.age }} years old</h5>
      {{ user.location }} <br />
      {{ user.email }}

      <button (click)="update()">Internal update</button>
      <p>* should update</p>
    </div>
  `
})
export class UserTwoComponent {
  @Input()
  user;

  update() {
    this.user.name = 'Kevin Durant';
  }
}

Every time we change object properties like 'this.user.email' or 'this.user.name', UserTwoComponent would always update the changes but UserOneComponent only change when we have a new user object.

If you change the properties inside of each component, it inherit the ChangeDectectionStrategy, for instance, if we change this.user.name inside UserOneComponent both names in UserOneComponent and UserTwoComponent would change, but if we change name inside UserTwoComponent, only name inside UserTwoComponent would change