You want to optimize an Angular app by running heavy calculations without triggering UI updates, then update UI once done. Which approach using Zone.js is correct?

hard🚀 Application Q15 of 15

Angular - Change Detection

ARun calculations inside <code>zone.runOutsideAngular()</code>, then update UI inside <code>zone.run()</code>.

BRun calculations inside <code>zone.run()</code> and update UI outside Angular zone.

CRun calculations and UI update both inside <code>zone.run()</code>.

DRun calculations and UI update both outside Angular zone.

Step-by-Step Solution

Solution:

Step 1: Use runOutsideAngular for heavy work
Heavy calculations inside runOutsideAngular() avoid triggering UI updates repeatedly.
Step 2: Use run to update UI once done
After calculations, call zone.run() to update UI and trigger change detection.
Final Answer:
Run calculations inside zone.runOutsideAngular(), then update UI inside zone.run(). -> Option A
Quick Check:
Heavy work outside, UI update inside = D [OK]

Quick Trick: Heavy work outside zone, UI update inside zone.run [OK]

Common Mistakes:

MISTAKES

Running heavy work inside Angular zone causing slow UI
Updating UI outside Angular zone so no refresh
Doing both heavy work and UI update outside zone

Master "Change Detection" in Angular

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions

More Angular Quizzes

You want to optimize an Angular app by running heavy calculations without triggering UI updates, then update UI once done. Which approach using Zone.js is correct?

Step 1: Use runOutsideAngular for heavy work

Step 2: Use run to update UI once done

Final Answer:

Quick Check:

Want More Practice?