Triggering detection manually in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when ChangeDetectorRef.detectChanges() is called?

Consider an Angular component where you manually call detectChanges() from ChangeDetectorRef. What is the immediate effect on the component's view?

Angular

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

@Component({
  selector: 'app-manual-detect',
  template: `<p>{{counter}}</p><button (click)="increment()">Increment</button>`
})
export class ManualDetectComponent {
  counter = 0;
  constructor(private cdr: ChangeDetectorRef) {}
  increment() {
    this.counter++;
    this.cdr.detectChanges();
  }
}

A The component's view updates only after Angular's next automatic change detection cycle.

B The component's view updates immediately to reflect the new counter value.

C The component's view does not update until the component is destroyed and recreated.

D Calling detectChanges() causes an error because it cannot be called manually.

💡 Hint

Think about what detectChanges() does in Angular's change detection mechanism.

Calling detectChanges() triggers Angular to check the component and its children immediately, updating the view to reflect any changes in data bindings.

❓ lifecycle

intermediate

When should you use ApplicationRef.tick() in Angular?

Which scenario correctly describes when to use ApplicationRef.tick() to trigger change detection manually?

A When you want to reset the component's state to initial values.

B When you want to detect changes only in a single component and its children.

C When you want to trigger change detection for the entire application immediately.

D When you want to stop Angular's automatic change detection.

💡 Hint

ApplicationRef.tick() affects the whole app, not just one component.

ApplicationRef.tick() triggers change detection for the entire Angular application immediately, useful in rare cases when you need a full manual check.

🔧 Debug

advanced

Why does calling detectChanges() inside ngAfterViewInit cause ExpressionChangedAfterItHasBeenCheckedError?

Given this Angular component code, why does calling detectChanges() inside ngAfterViewInit cause an ExpressionChangedAfterItHasBeenCheckedError?

Angular

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

@Component({
  selector: 'app-error-demo',
  template: `<p>{{message}}</p>`
})
export class ErrorDemoComponent implements AfterViewInit {
  message = 'Initial';
  constructor(private cdr: ChangeDetectorRef) {}
  ngAfterViewInit() {
    this.message = 'Changed after view init';
    this.cdr.detectChanges();
  }
}

A Because the view was already checked and changing data after that triggers the error.

B Because ngAfterViewInit runs before the component is initialized.

C Because message is not a valid property to bind in the template.

D Because detectChanges() cannot be called inside lifecycle hooks.

💡 Hint

Think about Angular's change detection timing and when it expects data to be stable.

The error occurs because Angular detects that a bound value changed after it finished checking the view, which is not allowed to prevent inconsistent UI.

📝 Syntax

advanced

Which code snippet correctly injects ChangeDetectorRef and triggers manual detection?

Select the code snippet that correctly injects ChangeDetectorRef and triggers manual change detection in an Angular component method.

A

constructor(private cdr: ChangeDetectorRef) {}

update() {
  this.cdr.tick();
}

B

constructor(cdr: ChangeDetectorRef) {}

update() {
  cdr.detectChanges();
}

C

constructor(private cdr: ChangeDetectorRef) {}

update() {
  ChangeDetectorRef.detectChanges();
}

D

constructor(private cdr: ChangeDetectorRef) {}

update() {
  this.cdr.detectChanges();
}

💡 Hint

Remember how to use dependency injection and call instance methods.

Option D correctly injects ChangeDetectorRef as a private property and calls detectChanges() on that instance.

❓ state_output

expert

What is the output after manually detaching and reattaching change detection?

Given this Angular component code, what will be the displayed counter value after clicking the button twice?

Angular

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

@Component({
  selector: 'app-detach-demo',
  template: `<p>{{counter}}</p><button (click)="increment()">Increment</button>`
})
export class DetachDemoComponent {
  counter = 0;
  constructor(private cdr: ChangeDetectorRef) {
    this.cdr.detach();
  }
  increment() {
    this.counter++;
    if (this.counter === 2) {
      this.cdr.reattach();
    }
  }
}

A After two clicks, the displayed counter jumps directly to 2 without showing 1.

B The displayed counter updates immediately on every click.

C The displayed counter never updates because change detection is detached.

D After two clicks, the displayed counter is 1, then updates to 2 after reattach.

💡 Hint

Consider what happens when change detection is detached and then reattached.

Initially, change detection is detached, so the view does not update on the first click (counter=1). After the second click, reattach() is called, so the view updates to show 2.