ChangeDetectorRef

Base class for Angular Views, provides change detection functionality. A change-detection tree collects all views that are to be checked for changes. Use the methods to add and remove views from the tree, initiate change-detection, and explicitly mark views as dirty, meaning that they have changed and need to be rerendered.

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

Methods

markForCheck()
When a view uses the OnPush (checkOnce) change detection strategy, explicitly marks the view as changed so that it can be checked again.
abstract markForCheck(): void Parameters There are no parameters. Returns void
Components are normally marked as dirty (in need of rerendering) when inputs have changed or events have fired in the view. Call this method to ensure that a component is checked even if these triggers have not occured.

detach()
Detaches this view from the change-detection tree. A detached view is not checked until it is reattached. Use in combination with detectChanges() to implement local change detection checks.
abstract detach(): void Parameters There are no parameters. Returns void
Detached views are not checked during change detection runs until they are re-attached, even if they are marked as dirty.

detectChanges()
Checks this view and its children. Use in combination with detach to implement local change detection checks.
abstract detectChanges(): void Parameters There are no parameters. Returns void

checkNoChanges()
Checks the change detector and its children, and throws if any changes are detected.
abstract checkNoChanges(): void Parameters There are no parameters. Returns void
Use in development mode to verify that running change detection doesn't introduce other changes.

reattach()
Re-attaches the previously detached view to the change detection tree. Views are attached to the tree by default.
abstract reattach(): void Parameters There are no parameters. Returns void

Usage notes

The following examples demonstrate how to modify default change-detection behavior to perform explicit detection when needed.

Use markForCheck() with CheckOnce strategy

The following example sets the OnPush change-detection strategy for a component (CheckOnce, rather than the default CheckAlways), then forces a second check after an interval. See live demo.

@Component({
  selector: 'my-app',
  template: `Number of ticks: {{numberOfTicks}}`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})

class AppComponent {
  numberOfTicks = 0;

  constructor(private ref: ChangeDetectorRef) {
    setInterval(() => {
      this.numberOfTicks++;
      // require view to be updated
      this.ref.markForCheck();
    }, 1000);
  }
}

Detach change detector to limit how often check occurs

The following example defines a component with a large list of read-only data that is expected to change constantly, many times per second. To improve performance, we want to check and update the list less often than the changes actually occur. To do that, we detach the component's change detector and perform an explicit local check every five seconds.

class DataListProvider {
  // 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: DataListProvider) {
    ref.detach();
    setInterval(() => { this.ref.detectChanges(); }, 5000);
  }
}

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

Reattaching a detached component

The following example creates a component displaying live data. The component detaches its change detector from the main change detector tree when the live property is set to false, and reattaches it when the property becomes true.

class DataProvider {
  data = 1;
  constructor() {
    setInterval(() => { 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: boolean) {
    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 App1 {
  live = true;
}