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
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
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
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
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
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 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
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);
}
}
}
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)
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.
