This is the archived documentation for Angular v5. Please visit angular.io to see documentation for the current version of Angular.

ChangeDetectorRef

npm Package @angular/core
Module import { ChangeDetectorRef } from '@angular/core';
Source core/src/change_detection/change_detector_ref.ts

Overview

      
      class ChangeDetectorRef {
  markForCheck(): void
  detach(): void
  detectChanges(): void
  checkNoChanges(): void
  reattach(): void
}

Subclasses

Members

      
      markForCheck(): void

Marks all OnPush ancestors as to be checked.

Example (live demo)

      
      @Component({
  selector: 'cmp',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `Number of ticks: {{numberOfTicks}}`
})
class Cmp {
  numberOfTicks = 0;

  constructor(private ref: ChangeDetectorRef) {
    setInterval(() => {
      this.numberOfTicks++;
      // the following is required, otherwise the view will not be updated
      this.ref.markForCheck();
    }, 1000);
  }
}

@Component({
  selector: 'app',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <cmp><cmp>
  `,
})
class App {
}
    
      
      detach(): void

Detaches the change detector from the change detector tree.

The detached change detector will not be checked until it is reattached.

This can also be used in combination with detectChanges to implement local change detection checks.

Example

The following example defines a component with a large list of readonly data. Imagine the data changes constantly, many times per second. For performance reasons, we want to check and update the list every five seconds. We can do that by detaching the component's change detector and doing a local check every five seconds.

      
      class DataProvider {
  // in a real application the returned data will be different every time
  get data() {
    return [1,2,3,4,5];
  }
}

@Component({
  selector: 'giant-list',
  template: `
    <li *ngFor="let d of dataProvider.data">Data {{d}}</li>
  `,
})
class GiantList {
  constructor(private ref: ChangeDetectorRef, private dataProvider: DataProvider) {
    ref.detach();
    setInterval(() => {
      this.ref.detectChanges();
    }, 5000);
  }
}

@Component({
  selector: 'app',
  providers: [DataProvider],
  template: `
    <giant-list><giant-list>
  `,
})
class App {
}
    
      
      detectChanges(): void

Checks the change detector and its children.

This can also be used in combination with detach to implement local change detection checks.

Example

The following example defines a component with a large list of readonly data. Imagine, the data changes constantly, many times per second. For performance reasons, we want to check and update the list every five seconds.

We can do that by detaching the component's change detector and doing a local change detection check every five seconds.

See detach for more information.

      
      checkNoChanges(): void

Checks the change detector and its children, and throws if any changes are detected.

This is used in development mode to verify that running change detection doesn't introduce other changes.

      
      reattach(): void

Reattach the change detector to the change detector tree.

This also marks OnPush ancestors as to be checked. This reattached change detector will be checked during the next change detection run.

Example (live demo)

The following example creates a component displaying live data. The component will detach its change detector from the main change detector tree when the component's live property is set to false.

      
      class DataProvider {
  data = 1;

  constructor() {
    setInterval(() => {
      this.data = this.data * 2;
    }, 500);
  }
}

@Component({
  selector: 'live-data',
  inputs: ['live'],
  template: 'Data: {{dataProvider.data}}'
})
class LiveData {
  constructor(private ref: ChangeDetectorRef, private dataProvider: DataProvider) {}

  set live(value) {
    if (value) {
      this.ref.reattach();
    } else {
      this.ref.detach();
    }
  }
}

@Component({
  selector: 'app',
  providers: [DataProvider],
  template: `
    Live Update: <input type="checkbox" [(ngModel)]="live">
    <live-data [live]="live"><live-data>
  `,
})
class App {
  live = true;
}