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

Question

I happened to see ChangeDetectionStrategy in the ngrx documentation. It uses OnPush.

What is ChangeDetectionStrategy in Angula

Answer 1

I saw a really nice and simple explanation in that link:

http://www.codecompiled.com/change-detection-in-angular-2/

ChangeDetectionStrategy.OnPush: it will update the view only in specific scenarios:
* When some event is fired.
* When value of input changes.

Default mean: Always update the view.

Answer 2

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.

Answer 3

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

Answer 4

Change detection is a feature provided by angular framework which is responsible for checking the changes happing in between the specified component with parent child relationship.

1. Change detection makes angular application more efficient you use it wisely.

2.It has two strategy onPush and Default.

3.OnPush Strategy gets executed when the specified object in component gets modified.Otherwise it remains as it's. That's why It makes efficient.

4.Default strategy makes application to work gets executed whenever it finds changes.

Answer 5

This example can help you understand it:

change_detection_strategy_onpush

angular2-with-immutablejs-and-redux

So what really happens when an event is triggered? In Angular 1.x, when a digest cycle is fired, every binding is triggered in the entire application. Similarly in Angular 2, every single component is also checked. Now wouldn’t it be cool to tell Angular to run change detection on a component only if one of its input properties changed instead of every time an event happens? We can by using Angular’s ChangeDetectionStrategy in our component level.

OnPush just focus on input properties, Default check all properties.