reattach

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.

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

Example

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 {
  int data = 1;
 
  DataProvider() {
    new Timer.periodic( const Duration(milliseconds: 500), () {
      data *= 2;
    });
  }
}
 
@Component(
    selector: 'live-data',
    inputs: const ['live'],
    template: 'Data: {{dataProvider.data}}'
)
class LiveData {
  final ChangeDetectorRef ref;
  final DataProvider dataProvider;
 
  LiveData(this.ref, this.dataProvider);
 
  set live(bool value) {
    if (value) {
      ref.reattach();
    } else {
      ref.detach();
    }
  }
}
 
@Component(
    selector: 'app',
    providers: const [DataProvider],
    template: '''
      Live Update: <input type="checkbox" [(ngModel)]="live">
      <live-data [live]="live"><live-data>
    ''',
    directives: const [LiveData, FORM_DIRECTIVES])
class App {
  bool live = true;
}
 
void main(){
  bootstrap(App);
}