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

There is no change in the app.component.ts

Child Component

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

Implement the DoCheck Interface

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

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

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

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

Create a differ property for customer object

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

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

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

The Complete child component as follows

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.