Angular Change Detection

What Triggers Change Detection?

  • Events - click, submit, …
  •  
  • XHR - Fetching data from a remote server
  •  
  • Timers - setTimeout(), setInterval()

What Triggers Change Detection?

// very simplified version of actual source
class ApplicationRef {

  changeDetectorRefs:ChangeDetectorRef[] = [];

  constructor(private zone: NgZone) {
    this.zone.onTurnDone
      .subscribe(() => this.zone.run(() => this.tick());
  }

  tick() {
    this.changeDetectorRefs
      .forEach((ref) => ref.detectChanges());
  }
}

Reducing Checks

@Component({
  template: `
    <h2>{{vData.name}}</h2>
    <span>{{vData.email}}</span>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
class VCardCmp {
  @Input() vData;
}

Triggering Manually

constructor(private cd: ChangeDetectorRef) {}


ngOnInit() {
    this.addItemStream.subscribe(() => {
      this.counter++; // application state changed
      this.cd.markForCheck(); // marks path
    })
  }
}

Heres a cat video for you

deck

By Maor Frankel

deck

  • 371