Ask Sawal

Discussion Forum
Notification Icon1
Write Answer Icon
Add Question Icon

What does ngdocheck do?

3 Answer(s) Available
Answer # 1 #

A callback method that performs change-detection, invoked after the default change-detector runs. See KeyValueDiffers and IterableDiffers for implementing custom change checking for collections.

Mat Giambra
Software Developer
Answer # 2 #

The contents of this answer is based on the angular version 2.x.x. For the most recent version 4.x.x see this post.

There is nothing on the internet on the inner workings of change detection, so I had to spend about a week debugging sources, so this answer will be pretty technical on details.

An angular application is a tree of views (AppView class that is extended by the Component specific class generated by the compiler). Each view has a change detection mode that lives in cdMode property. The default value for cdMode is ChangeDetectorStatus.CheckAlways, which is cdMode = 2.

When a change detection cycle runs, each parent view checks whether it should perform change detection on the child view here:

where this points to the child view. So if cdMode is ChangeDetectorStatus.Checked=1, the change detection is skipped for the immediate child and all its descendants because of this line.

What changeDetection: ChangeDetectionStrategy.OnPush does is simply sets cdMode to ChangeDetectorStatus.CheckOnce = 0, so after the first run of change detection the child view will have its cdMode set to ChangeDetectorStatus.Checked = 1 because of this code:

Which means that the next time a change detection cycle starts there will be no change detection performed for the child view.

There are few options how to run change detection for such view. First is to change child view's cdMode to ChangeDetectorStatus.CheckOnce, which can be done using this._changeRef.markForCheck() in ngDoCheck lifecycle hook:

This simply changes cdMode of the current view and its parents to ChangeDetectorStatus.CheckOnce, so next time the change detection is performed the current view is checked.

Check a full example here in the sources, but here is the gist of it:

Lakhani xjnspmuy Vani
Answer # 3 #

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


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

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

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

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.

Craig Kitzmann