Angular2 Default Change Detection

Question

How does Change Detection works in Angular2 when changeDetection Strategy is set to "ChangeDetectionStrategy.Default"? Does it check for all the bindings (by only reference) in template, and trigger re-render if any reference has been changed?

Answer 1

The default change detection strategy will run change detection for all the bindings. It will not only look for reference changes, but for property changes on your model as well.

For example running the following code will change the name in the template after the changeName() method is run, even though only the name property changes, not the person reference.

import {Component} from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello {{person.name}}</h1>
    <button (click)="changeName()">Change name!</button>
  `
})
export class AppComponent { 
  person = { name: 'Foo' };

  changeName() {
    this.person.name = 'Bar';
  } 
}