Optimizing rendering using ChangeDetectionStrategy

Examples

• 1

  Default vs OnPush

  edit move example delete share

  1

  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:`
    <div>
      <p>{{myInput}}</p>
      <p>{{someInternalValue}}</p>
    </div>
    `
  })
  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:`
    <div>
      <p>{{myInput}}</p>
      <p>{{someInternalValue}}</p>
    </div>
    `
  })
  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.

  edited Jul 29 at 21:46