[Solved] You wrote this code but Angular does not update the UI after the async task:this.zone.runOutsideAngular(() => { fetch('/data').then(() => { this.data = 'loaded'; });});What is the problem? | Angular

Angular - Change Detection

You wrote this code but Angular does not update the UI after the async task:

this.zone.runOutsideAngular(() => {
  fetch('/data').then(() => {
    this.data = 'loaded';
  });
});

What is the problem?

Afetch API is not supported inside runOutsideAngular

BChange detection is not triggered because code runs outside Angular zone

CYou must call run() inside the then() callback to update UI

DThe data variable cannot be updated inside runOutsideAngular

Step-by-Step Solution

Solution:

Step 1: Understand runOutsideAngular effect
Code inside runOutsideAngular does not trigger Angular change detection automatically.
Step 2: Analyze fetch then callback
Updating this.data inside then() outside Angular zone won't update UI unless change detection runs.
Final Answer:
Change detection is not triggered because code runs outside Angular zone -> Option B
Quick Check:
runOutsideAngular skips change detection, so UI won't update automatically [OK]

Quick Trick: runOutsideAngular skips change detection; UI won't update automatically [OK]

Common Mistakes:

MISTAKES

Master "Change Detection" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

You wrote this code but Angular does not update the UI after the async task: