Triggering detection manually in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of manually triggering change detection in Angular?

Manually triggering change detection lets you tell Angular to check for updates in the UI when Angular's automatic detection doesn't catch changes, like when changes happen outside Angular's zone.

beginner

Which Angular service is commonly used to trigger change detection manually?

The ChangeDetectorRef service is used to manually trigger change detection by calling its detectChanges() method.

intermediate

How do you use ChangeDetectorRef to trigger change detection in a component?

Inject ChangeDetectorRef in the component constructor, then call this.cdRef.detectChanges() when you want Angular to update the view manually.

intermediate

What is the difference between detectChanges() and markForCheck() in Angular's change detection?

detectChanges() immediately runs change detection on the component and its children. markForCheck() marks the component to be checked in the next change detection cycle, useful with OnPush strategy.

intermediate

Why might Angular's automatic change detection miss some updates, requiring manual triggering?

Angular's automatic detection misses updates when changes happen outside Angular's zone, like in setTimeout, third-party libraries, or direct DOM events, so manual triggering is needed to update the UI.

Which method on ChangeDetectorRef triggers immediate change detection?

A markForCheck()

B detectChanges()

C run()

D check()

detectChanges() runs change detection immediately on the component and its children.

When should you manually trigger change detection in Angular?

A When changes happen inside Angular's zone

B Always, Angular never detects changes automatically

C When changes happen outside Angular's zone

D Only when using template-driven forms

Manual triggering is needed when changes happen outside Angular's zone, like in setTimeout or third-party code.

What does markForCheck() do in Angular's change detection?

A Marks component to be checked in next cycle

B Resets the component state

C Stops change detection

D Runs change detection immediately

markForCheck() marks the component to be checked in the next change detection cycle.

How do you inject ChangeDetectorRef in an Angular component?

A Use @ViewChild decorator

B Use @Injectable decorator

C Add it to providers array

D import { ChangeDetectorRef } from '@angular/core' and add it to constructor

You import ChangeDetectorRef from '@angular/core' and inject it via the component constructor.

Which Angular change detection strategy benefits most from manual triggering?

A OnPush

B Default

C Detached

D None

OnPush strategy requires manual triggers like markForCheck() or detectChanges() to update views on external changes.

Explain why and how you would manually trigger change detection in an Angular component.

Think about asynchronous code or third-party libraries.

Describe the difference between detectChanges() and markForCheck() methods in Angular's ChangeDetectorRef.

One is immediate, the other is deferred.