ngDoCheck for custom change detection in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does ngDoCheck affect component updates?

Consider an Angular component that implements ngDoCheck to detect changes in an object property. What happens when the object reference does not change but a nested property is updated?

Angular

export class MyComponent implements DoCheck {
  data = { count: 0 };
  oldCount = 0;

  ngDoCheck() {
    if (this.data.count !== this.oldCount) {
      console.log('Count changed:', this.data.count);
      this.oldCount = this.data.count;
    }
  }
}

A The console logs 'Count changed:' every time the nested property changes, even if the object reference is the same.

B The console never logs anything because <code>ngDoCheck</code> only detects reference changes, not nested property changes.

C The console logs 'Count changed:' only when the object reference changes, not when nested properties change.

D The console logs 'Count changed:' only once when the component initializes.

💡 Hint

Think about how ngDoCheck lets you write your own logic to detect changes beyond Angular's default checks.

ngDoCheck runs every change detection cycle. It allows you to compare nested properties manually. So even if the object reference stays the same, changes inside can be detected if you write the check.

❓ lifecycle

intermediate

When is ngDoCheck called in Angular's lifecycle?

Which statement best describes when Angular calls the ngDoCheck lifecycle hook?

A <code>ngDoCheck</code> is called only when the component is destroyed.

B <code>ngDoCheck</code> is called only once after the component is initialized.

C <code>ngDoCheck</code> is called after every change detection cycle, even if no input properties changed.

D <code>ngDoCheck</code> is called only when input properties change.

💡 Hint

Think about how Angular runs change detection frequently to keep the UI updated.

ngDoCheck runs after every change detection cycle, allowing custom checks even if Angular's default checks find no changes.

🔧 Debug

advanced

Why does this ngDoCheck implementation cause performance issues?

Review this ngDoCheck method. Why might it cause performance problems?

Angular

ngDoCheck() {
  for (let i = 0; i < 1000000; i++) {
    // heavy computation
    Math.sqrt(i);
  }
  console.log('Checked');
}

A Because <code>ngDoCheck</code> runs only on input changes, the computation is unnecessary.

B Because <code>ngDoCheck</code> only runs once, the heavy computation is wasted.

C Because <code>ngDoCheck</code> is asynchronous, the computation blocks UI updates.

D Because <code>ngDoCheck</code> runs very often, heavy computations inside it slow down the app.

💡 Hint

Remember how often Angular runs change detection and calls ngDoCheck.

ngDoCheck runs after every change detection cycle, which can be many times per second. Heavy work inside it slows the app.

📝 Syntax

advanced

Identify the syntax error in this ngDoCheck implementation

Which option contains the correct syntax for implementing ngDoCheck in an Angular component?

A

ngDoCheck() {
  console.log('Checking...');
}

B

ngDoCheck {
  console.log('Checking...');
}

C

ngDoCheck() => {
  console.log('Checking...');
}

D

function ngDoCheck() {
  console.log('Checking...');
}

💡 Hint

Remember how methods are declared inside a class in TypeScript.

In Angular components, lifecycle hooks are class methods declared with parentheses and curly braces. Option A is correct syntax.

❓ state_output

expert

What is the console output after these changes with ngDoCheck?

Given this component code, what will be logged to the console after the sequence of changes?

Angular

export class CounterComponent implements DoCheck {
  counter = { value: 0 };
  oldValue = 0;

  ngDoCheck() {
    if (this.counter.value !== this.oldValue) {
      console.log('Counter changed to', this.counter.value);
      this.oldValue = this.counter.value;
    }
  }

  increment() {
    this.counter.value++;
  }

  replaceCounter() {
    this.counter = { value: 10 };
  }
}

// Sequence:
// 1. increment()
// 2. ngDoCheck runs
// 3. replaceCounter()
// 4. ngDoCheck runs
// 5. increment()
// 6. ngDoCheck runs

A

Counter changed to 1
Counter changed to 10

B

Counter changed to 1
Counter changed to 10
Counter changed to 11

C

Counter changed to 1
Counter changed to 11

D

Counter changed to 10
Counter changed to 11

💡 Hint

Track the value changes carefully and when ngDoCheck logs happen.

After increment(), value is 1, logged. After replaceCounter(), value is 10, logged. After increment(), value is 11, logged.