This great article If you think ngDoCheck
means your component is being checked?—?read this article explains the error in depth.
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:
detectChanges(throwOnChange: boolean): void {
const s = _scope_check(this.clazz);
if (this.cdMode === ChangeDetectorStatus.Checked ||
this.cdMode === ChangeDetectorStatus.Errored)
return;
if (this.cdMode === ChangeDetectorStatus.Destroyed) {
this.throwDestroyedError('detectChanges');
}
this.detectChangesInternal(throwOnChange); <---- performs CD on child view
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.
if (this.cdMode === ChangeDetectorStatus.Checked ||
this.cdMode === ChangeDetectorStatus.Errored)
return;
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:
if (this.cdMode === ChangeDetectorStatus.CheckOnce)
this.cdMode = ChangeDetectorStatus.Checked;
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:
constructor(private _changeRef: ChangeDetectorRef) { }
ngDoCheck() {
this._changeRef.markForCheck();
}
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:
constructor(ref: ChangeDetectorRef) {
setInterval(() => {
this.numberOfTicks ++
// the following is required, otherwise the view will not be updated
this.ref.markForCheck();
^^^^^^^^^^^^^^^^^^^^^^^^
}, 1000);
}
The second option is call detectChanges
on the view itself which will run change detection on the current view if cdMode
is not ChangeDetectorStatus.Checked
or ChangeDetectorStatus.Errored
. Since with onPush
angular sets cdMode
to ChangeDetectorStatus.CheckOnce
, angular will run the change detection.
So ngDoCheck
doesn't override the changed detection, it's simply called on every changed detection cycle and it's only job is to set current view cdMode
as checkOnce
, so that during next change detection cycle it's checked for the changes. See this answer for details. If the current view's change detection mode is checkAlways
(set by default if onPush strategy is not used), ngDoCheck
seem to be of no use.