Triggering detection manually in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to inject ChangeDetectorRef in the component constructor.

Angular

constructor(private [1]: ChangeDetectorRef) {}

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

Acdr

BcdRef

Cdetector

DchangeDetector

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that is not descriptive or too generic.

Forgetting to mark the parameter as private.

The common and recommended variable name for ChangeDetectorRef is 'cdr'.

2fill in blank

medium

Complete the code to manually trigger change detection.

Angular

this.cdr.[1]();

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

Adetach

BmarkForCheck

CcheckNoChanges

DdetectChanges

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'markForCheck' which only marks the component for checking later.

Using 'detach' which stops change detection.

The method 'detectChanges()' triggers change detection immediately.

3fill in blank

hard

Fix the error in the code to trigger change detection after an async operation.

Angular

setTimeout(() => {
  this.cdr.[1]();
}, 1000);

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

AmarkForCheck

BdetectChanges

CcheckNoChanges

Ddetach

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'markForCheck' which schedules detection but does not run it immediately.

Using 'detach' which disables change detection.

After async operations, 'detectChanges()' is used to update the view immediately.

4fill in blank

hard

Fill both blanks to detach and then reattach change detection.

Angular

this.cdr.[1]();
this.cdr.[2]();

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

Adetach

BdetectChanges

Creattach

DmarkForCheck

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing 'markForCheck' with 'reattach'.

Calling 'detectChanges' instead of 'reattach' to resume detection.

First detach disables change detection, then reattach enables it again.

5fill in blank

hard

Fill all three blanks to mark for check, detect changes, and detach.

Angular

this.cdr.[1]();
this.cdr.[2]();
this.cdr.[3]();

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

AmarkForCheck

BdetectChanges

Cdetach

Dreattach

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the order of methods.

Using 'reattach' instead of 'detach' at the end.

Mark for check schedules detection, detectChanges runs it immediately, detach stops detection.