DoCheck

Implement this interface to override the default change detection algorithm for your directive.

ngDoCheck gets called to check the changes in the directives instead of the default algorithm.

The default change detection algorithm looks for differences by comparing bound-property values by reference across change detection runs. When DoCheck is implemented, the default algorithm is disabled and ngDoCheck is responsible for checking for changes.

Implementing this interface allows improving performance by using insights about the component, its implementation and data types of its properties.

Note that a directive should not implement both DoCheck and OnChanges at the same time. ngOnChanges would not be called when a directive implements DoCheck. Reaction to the changes have to be handled from within the ngDoCheck callback.

Use KeyValueDiffers and IterableDiffers to add your custom check mechanisms.

Example

In the following example ngDoCheck uses an IterableDiffers to detect the updates to the array list:

@Component(
  selector: 'custom-check',
  template: '''
    <p>Changes:</p>
    <ul>
      <li *ngFor="let line of logs">{{line}}</li>
    </ul>
  ''',
  directives: const [NgFor]
)
class CustomCheckComponent implements DoCheck {
  final IterableDiffer differ;
  final List<String> logs = [];
 
  @Input()
  List list;
 
  CustomCheckComponent(IterableDiffers differs) :
    differ = differs.find([]).create(null);
 
  @override
  ngDoCheck() {
    var changes = differ.diff(list);
 
    if (changes is DefaultIterableDiffer) {
      changes.forEachAddedItem(r => logs.add('added ${r.item}'));
      changes.forEachRemovedItem(r => logs.push('removed ${r.item}'))
    }
  }
}
 
@Component({
  selector: 'app',
  template: '''
    <button (click)="list.push(list.length)">Push</button>
    <button (click)="list.pop()">Pop</button>
    <custom-check [list]="list"></custom-check>
  ''',
  directives: const [CustomCheckComponent]
})
class App {
  List list = [];
}