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

Question

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

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

Answer 1

Use the OnPush strategy if your objects are immutable and you do not change the state of the objects in your component. It will work better than the default when each change to the object makes a trigger change detector to allow changes. More or less similarly described in Change Detection Strategy: OnPush

To tell Angular that we will abide by the conditions mentioned earlier to improve performance, we will use the OnPush change detection strategy

Angular Docs

ChangeDetectionStrategy:

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

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

Answer 2

All of the above answers explain OnPush and Default , here I am posting an example of how this 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'; } } 

Each time we change the properties of an object, such as "this.user.email" or "this.user.name", UserTwoComponent will always update the changes, but UserOneComponent only changes when we have a new user object.

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

Answer 3

This example will help you understand:

change_detection_strategy_onpush

angular2-with-immutablejs-and-redux

So what happens when an event fires? In Angular 1.x, when a digest loop is started, each binding starts in the whole application. Similarly, in Angular 2, each individual component is also tested. Now it would be great to say that Angular only triggers change detection on a component if one of its input properties changes, and not every time an event occurs? We can use Angular s ChangeDetectionStrategy at our component level.

OnPush just focuses on input properties, by default it checks all properties.

Answer 4

I saw a very nice and simple explanation in this link:

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

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

Default means: always update the view.