detach

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.

<!-- TODO: Add a link to a chapter on detach/reattach/local digest -->

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
  List get data => [1, 2, 3, 4, 5];
}
 
@Component(
    selector: 'giant-list',
    template: '''
       <li *ngFor="let d of dataProvider.data">Data {{d}}</lig>
     ''',
    directives: const [NgFor])
class GiantList {
  ChangeDetectorRef _ref;
  final DataProvider dataProvider;
 
  GiantList(this._ref, this.dataProvider) {
    _ref.detach();
    new Timer(new Duration(seconds: 5), () {
      _ref.detectChanges();
    });
  }
}
 
@Component(
    selector: 'app',
    providers: const [DataProvider],
    template: '''
       <giant-list><giant-list>
     ''',
    directives: const [GiantList])
class App {}
 
void main() {
  bootstrap(App);
}