Angular

Chapter 19: Optimizing rendering using
ChangeDetectionStrategy
Section 19.1: Default vs OnPush
Consider the following component with one input myInput and an internal value called someInternalValue. Both of
them are used in a component's template.
import {Component, Input} from '@angular/core';
@Component({
template:`
{{myInput}}
{{someInternalValue}}
`
})
class MyComponent {
@Input() myInput: any;
someInternalValue: any;
}
// ...
By default, the changeDetection: property in the component decorator will be set to
ChangeDetectionStrategy.Default; implicit in the example. In this situation, any changes to any of the values in
the template will trigger a re-render of MyComponent. In other words, if I change myInput or someInternalValue
angular 2 will exert energy and re-render the component.
Suppose, however, that we only want to re-render when the inputs change. Consider the following component with
changeDetection: set to ChangeDetectionStrategy.OnPush
import {Component, ChangeDetectionStrategy, Input} from '@angular/core';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush
template:`
{{myInput}}
{{someInternalValue}}
`
})
class MyComponent {
@Input() myInput: any;
someInternalValue: any;
}
// ...
By setting changeDetection: to ChangeDetectionStrategy.OnPush, MyComponent will only re-render when its inputs
change. In this case, myInput will need to receive a new value from its parent to trigger a re-render.
GoalKicker.com – Angular 2 Notes for Professionals 90