[Solved] This Angular component does not update the view after a timer:constructor(private zone: NgZone) { this.zone.... });}How to fix it so the UI updates correctly? | Angular

Angular - Change Detection

This Angular component does not update the view after a timer:

constructor(private zone: NgZone) {
  this.zone.runOutsideAngular(() => {
    setTimeout(() => {
      this.counter++;
    }, 1000);
  });
}

How to fix it so the UI updates correctly?

AWrap the counter increment inside this.zone.run() inside setTimeout

BRemove runOutsideAngular and use run() instead

CAll of the above

DCall detectChanges() manually after increment

Step-by-Step Solution

Solution:

Step 1: Identify why UI doesn't update
runOutsideAngular skips change detection, so counter++ alone won't update UI.
Step 2: Explore fixes
Wrapping increment in run() re-enters Angular zone; removing runOutsideAngular runs inside zone; manual detectChanges triggers update.
Final Answer:
All of the above -> Option C
Quick Check:
Any method re-entering Angular zone or triggering detection updates UI [OK]

Quick Trick: Re-enter Angular zone or trigger detection to update UI [OK]

Common Mistakes:

MISTAKES

Master "Change Detection" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

This Angular component does not update the view after a timer: