Angular ngDoCheck Life Cycle Hook

In this tutorial, we will learn how ngDoCheck lifecycle hook works. We will find out how to keep track of the changes to @Input properties using the DoCheck hook. We also look at the how key-value differs and Iterable differs works

What is ngDoCheck lifecycle hook

We looked at how OnChanges hook works in the Previous chapter. It is triggered every time when the Angular detected a change to the data-bound input property

We also looked at how OnChanges does not fire when the input property is an array/object because Angular uses dirty checking to compare the properties.

In such a scenario, where Angular fails to detect the changes to the input property, the DoCheck allows us to implement our custom change detection.

The Angular Fires the DoCheck hook after each change detection

ngDoCheck example

Let us build on the code, we built in the previous tutorial on Onchanges

customer.ts

export class Customer {
    code: number;
    name: string;
}

There is no change in the app.component.ts

import { Component} from '@angular/core';
import { Customer } from './customer';

@Component({
  selector: 'app-root',
  template: `
        <h1>{{title}}!</h1>
        <p> Message : <input type='text' [(ngModel)]='message'> </p>
        <p> Code : <input type='text' [(ngModel)]='code'></p>
        <p> Name : <input type='text' [(ngModel)]='name'></p>
        <p><button (click)="updateCustomer()">Update </button>
        <child-component [message]=message [customer]=customer></child-component>
        ` ,

        styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ngOnChanges';
  message = '';
  customer: Customer = new Customer();
  name= '';
  code= 0;

  updateCustomer() {
    this.customer.name = this.name;
    this.customer.code = this.code;
  }

}

Child Component

import { Component, Input, OnChanges, OnInit, SimpleChanges, SimpleChange, DoCheck  } from '@angular/core';
import { Customer } from './customer';

@Component({
    selector: 'child-component',
    template: `<h2>Child  Component</h2>
               <p>Message {{ message }} </p>
               <p>Customer Name {{ customer.name }} </p>
               <p>Customer Code {{ customer.code }} </p>
               <p>Do Check count {{ DocheckCount }} </p>
               <ul><li *ngFor="let log of changelog;"> {{ log }}</li></ul> `
})
export class ChildComponent implements OnChanges, DoCheck, OnInit {
    @Input() message: string;
    @Input() customer: Customer;
    changelog: string[] = [];
    oldCustomer: Customer= new Customer();
    DocheckCount = 0;

    ngOnInit() {
        console.log('OnInit');
        this.oldCustomer = Object.assign({}, this.customer);
    }

    ngDoCheck() {
        console.log('Docheck');
        this.DocheckCount++;
        if (this.oldCustomer.name !== this.customer.name || this.oldCustomer.code !== this.customer.code ) {
            const to  = JSON.stringify(this.customer);
            const from = JSON.stringify(this.oldCustomer);
            const changeLog = `DoCheck customer: changed from ${from} to ${to} `;
            this.changelog.push(changeLog);

            this.oldCustomer = Object.assign({}, this.customer);
        }
    }

    ngOnChanges(changes: SimpleChanges) {
        console.log('OnChanges');
        console.log(JSON.stringify(changes));

        // tslint:disable-next-line:forin
        for (const propName in changes) {
             const change = changes[propName];
             const to  = JSON.stringify(change.currentValue);
             const from = JSON.stringify(change.previousValue);
             const changeLog = `${propName}: changed from ${from} to ${to} `;
             this.changelog.push(changeLog);
        }
    }
}

First, we imported the DoCheck from the @angular/core library

import { Component, Input, OnChanges, OnInit, SimpleChanges, SimpleChange, DoCheck  } from '@angular/core';
import { Customer } from './customer';

Implement the DoCheck Interface

export class ChildComponent implements OnChanges, DoCheck, OnInit {

We have created a new property oldCustomer to store the old value of the customer. We also have DoCheckcount property, which keeps track of no of times this hook is fired

    oldCustomer: Customer= new Customer();
    DocheckCount = 0;

We are cloning the customer object into the oldCustomer in the OnInit hook. The old customer values are compared with new customer to check whether the customer object has changed

  ngOnInit() {
        console.log('OnInit');
        this.oldCustomer = Object.assign({}, this.customer);
    }

Finally, in the ngDoChek hook, we compare the new values of customer to oldCustomer values to detect any changes

    ngDoCheck() {
        console.log('Docheck');
        this.DocheckCount++;
        if (this.oldCustomer.name !== this.customer.name || this.oldCustomer.code !== this.customer.code ) {
            const to  = JSON.stringify(this.customer);
            const from = JSON.stringify(this.oldCustomer);
            const changeLog = `DoCheck customer: changed from ${from} to ${to} `;
            this.changelog.push(changeLog);

            this.oldCustomer = Object.assign({}, this.customer);
        }

    }

That’s it

Run the code and you will notice that whenever the customer is added, the our code detects the change logs it into our changeLog

When ngDoCheck is called

Notice that DoCheckCount keeps incrementing for every keystroke, mouse movements

Angular calls this hook very frequently. This hook is called after every change detection cycle no matter where the change has occurred

It is advisable to keep the implementation of Docheck simple and lightweight. Otherwise, it will result in bad user experience

Checking for changes

In the example above, we cloned our customer object and checked each property for a change. But what if we have large object or array.

The Angular provides a service called differs, which evaluate the given object/array and determines what changed

There are two types of differs, that angular provides

1. key-value differs
2. iterable differs

key-value differs

The KeyValueDiffers service is a differ that tracks changes made to an object over time and also expose an API to react to these changes.

Key-value differs should be used for dictionary-like structures, and it works at the key level. This differ will identify changes when a new key is added, when a key removed and when the value of a key changed.

Iterable differs

Iterable differs service is used when we have a list-like structure and we’re only interested in
knowing things that were added or removed from that list.

It will detect if the elements are added/removed from the array. This will not detect if the changes are done to the elements of array

To do that, you need to create a separate key value differ for the each element

Example of key-value differs

Import KeyValueDiffers from @angular/core

Inject it into the constructor

   constructor(private differs: KeyValueDiffers) {
   }

Create a differ property for customer object

differ: any;

Initaisle the differ object with initial value.

The find() method searches for a key value differ in differs collection. If not found creates the differ and returns an instance of DefaultKeyValueDiffer

    ngOnInit() {
        console.log('OnInit');
        this.differ = this.differs.find(this.customer).create(null);
    }

Next, using the diff method of the differ, we are checking if our object is changed. The object returns null if there is no change. It returns an object, which contains the changes made to the object

const customerChanges = this.differ.diff(this.customer);

We, can then use the returned object to find out what was added, changed or removed properties using the forEachChangedItem, forEachAddedItem, forEachRemovedItem as shown below

    if (customerChanges) {
            console.log(customerChanges);
            customerChanges.forEachChangedItem(r =>  this.changelog.push('changed ' + r.key + ' ' + JSON.stringify( r.currentValue)));
            customerChanges.forEachAddedItem(r =>  this.changelog.push('added ' + r.key + ' ' + JSON.stringify( r.currentValue)));
            customerChanges.forEachRemovedItem(r =>  this.changelog.push('removed ' + r.key + ' ' + JSON.stringify( r.currentValue)));
        }

The Complete child component as follows

import { Component, Input, OnChanges, OnInit, SimpleChanges, SimpleChange, DoCheck, KeyValueDiffers } from '@angular/core';
import { Customer } from './customer';

@Component({
    selector: 'child-component',
    template: `<h2>Child  Component</h2>
               <p>Message {{ message }} </p>
               <p>Customer Name {{ customer.name }} </p>
               <p>Customer Code {{ customer.code }} </p>
               <p>Do Check count {{ DocheckCount }} </p>
               <ul><li *ngFor="let log of changelog;"> {{ log }}</li></ul> `
})
export class ChildComponent implements OnChanges, DoCheck, OnInit {
    @Input() message: string;
    @Input() customer: Customer;
    changelog: string[] = [];
    oldCustomer: Customer= new Customer();
    DocheckCount = 0;
    differ: any;

    constructor(private differs: KeyValueDiffers) {

    }
    ngOnInit() {
        console.log('OnInit');
        this.differ = this.differs.find(this.customer).create(null);
    }

    ngDoCheck() {
        console.log('Docheck');
        this.DocheckCount++;

        const customerChanges = this.differ.diff(this.customer);

        if (customerChanges) {
            console.log(customerChanges);
            customerChanges.forEachChangedItem(r =>  this.changelog.push('changed ' + r.key + ' ' + JSON.stringify( r.currentValue)));
            customerChanges.forEachAddedItem(r =>  this.changelog.push('added ' + r.key + ' ' + JSON.stringify( r.currentValue)));
            customerChanges.forEachRemovedItem(r =>  this.changelog.push('removed ' + r.key + ' ' + JSON.stringify( r.currentValue)));
        }

    }

    ngOnChanges(changes: SimpleChanges) {
        console.log('OnChanges');
        console.log(JSON.stringify(changes));

        // tslint:disable-next-line:forin
        for (const propName in changes) {
             const change = changes[propName];
             const to  = JSON.stringify(change.currentValue);
             const from = JSON.stringify(change.previousValue);
             const changeLog = `${propName}: changed from ${from} to ${to} `;
             this.changelog.push(changeLog);
        }
    }
}

Iterable differs

The iterable differ behaves the same way the key-value differ but it only provides methods for items that were added or removed.

The iterable differs works on arrays. Using iterable differs is no different for key value differs. Just import the IterableDiffers and inject it into the constructor. Rest of the code stays same (except forEachChangedItem)

Conclusion

In this tutorial, we looked at how to use ngDoCheck hook to built custom change detection for input properties. We also looked at how to use key-value differs and Iterable differs.