ngDoCheck for custom change detection in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to implement the ngDoCheck lifecycle hook in an Angular component.

Angular

import { Component, [1] } from '@angular/core';

@Component({
  selector: 'app-check',
  template: `<p>Check example</p>`
})
export class CheckComponent implements [1] {
  ngDoCheck() {
    console.log('Custom change detection running');
  }
}

Drag options to blanks, or click blank then click option'

ADoCheck

BOnChanges

CAfterViewInit

DOnInit

Attempts:

3 left

💡 Hint

Common Mistakes

Using OnInit instead of DoCheck

Forgetting to implement the DoCheck interface

The DoCheck interface allows you to implement the ngDoCheck method for custom change detection.

2fill in blank

medium

Complete the code to detect changes manually inside ngDoCheck.

Angular

import { Component, DoCheck, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-manual-check',
  template: `<p>{{message}}</p>`
})
export class ManualCheckComponent implements DoCheck {
  message = 'Initial';

  constructor(private cdr: [1]) {}

  ngDoCheck() {
    this.message = 'Checked';
    this.cdr.detectChanges();
  }
}

Drag options to blanks, or click blank then click option'

AChangeDetectorRef

BNgZone

CRenderer2

DElementRef

Attempts:

3 left

💡 Hint

Common Mistakes

Injecting NgZone instead of ChangeDetectorRef

Calling detectChanges on the wrong service

The ChangeDetectorRef service allows manual triggering of change detection.

3fill in blank

hard

Fix the error in the ngDoCheck method to avoid infinite loops.

Angular

ngDoCheck() {
  if (this.value !== this.previousValue) {
    this.previousValue = this.value;
    this.message = 'Value changed';
    [1];
  }
}

Drag options to blanks, or click blank then click option'

Athis.cdr.reattach()

Bthis.cdr.markForCheck()

Cthis.cdr.detach()

Dthis.cdr.detectChanges()

Attempts:

3 left

💡 Hint

Common Mistakes

Calling detectChanges inside ngDoCheck causing infinite loops

Not marking the component for check

Using markForCheck() schedules change detection without causing an immediate cycle, preventing infinite loops.

4fill in blank

hard

Fill both blanks to create a custom change detection that compares old and new values.

Angular

export class CustomCheckComponent implements DoCheck {
  oldValue = '';
  newValue = 'Hello';

  ngDoCheck() {
    if (this.newValue [1] this.oldValue) {
      this.oldValue = this.newValue;
      console.log('Value changed:', this.newValue);
    }
  }
}

Drag options to blanks, or click blank then click option'

A===

B!=

C==

D!==

Attempts:

3 left

💡 Hint

Common Mistakes

Using == instead of !== causing false positives

Using === which checks for equality, not difference

The strict inequality operator !== checks if values are different, triggering the change logic.

5fill in blank

hard

Fill all three blanks to implement ngDoCheck with manual change detection and previous value tracking.

Angular

export class TrackValueComponent implements DoCheck {
  previousValue = '';
  currentValue = 'Angular';

  constructor(private [1]: ChangeDetectorRef) {}

  ngDoCheck() {
    if (this.currentValue [2] this.previousValue) {
      this.previousValue = this.currentValue;
      this.[3].markForCheck();
    }
  }
}

Drag options to blanks, or click blank then click option'

Acdr

B!==

D===

EchangeDetector

FdetectChanges

GmarkForCheck

HcdRef

Attempts:

3 left

💡 Hint

Common Mistakes

Using === instead of !== for comparison

Calling detectChanges inside ngDoCheck causing loops

Using wrong variable names for ChangeDetectorRef

Inject ChangeDetectorRef as cdr, compare values with !==, and call cdr.markForCheck() to schedule change detection.