Zone.js and automatic detection in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import Zone.js for Angular automatic change detection.

Angular

import '[1]';

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

Arxjs

B@angular/core

Czone.js

Dtypescript

Attempts:

3 left

💡 Hint

Common Mistakes

Importing '@angular/core' instead of 'zone.js'.

Forgetting to import Zone.js at all.

Zone.js is imported to enable Angular's automatic change detection.

2fill in blank

medium

Complete the code to run a function outside Angular's zone.

Angular

this.ngZone.[1](() => {
  console.log('Running outside Angular zone');
});

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

Arun

BrunAsync

CrunInsideAngular

DrunOutsideAngular

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'run' which triggers change detection.

Using a non-existent method like 'runInsideAngular'.

runOutsideAngular lets you execute code without triggering Angular change detection.

3fill in blank

hard

Fix the error in the code to correctly inject NgZone in the constructor.

Angular

constructor(private [1]: NgZone) {}

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

AngZone

BzoneService

Czone

DzoneJs

Attempts:

3 left

💡 Hint

Common Mistakes

Using generic names like 'zone' or 'zoneService' which are less clear.

Using names that don't match the injected type.

The common and recommended name for the injected NgZone is 'ngZone'.

4fill in blank

hard

Fill both blanks to create a subscription that runs outside Angular's zone.

Angular

this.ngZone.[1](() => {
  observable.[2](value => {
    console.log(value);
  });
});

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

ArunOutsideAngular

Bsubscribe

Crun

Dnext

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'run' instead of 'runOutsideAngular'.

Using 'next' instead of 'subscribe' on the observable.

runOutsideAngular runs code outside Angular's zone, and subscribe listens to observable values.

5fill in blank

hard

Fill all three blanks to manually trigger change detection after running outside Angular.

Angular

this.ngZone.[1](() => {
  // some async work
  this.data = newData;
  this.cd.[2]();
  this.ngZone.[3](() => {});
});

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

ArunOutsideAngular

BdetectChanges

Crun

DmarkForCheck

Attempts:

3 left

💡 Hint

Common Mistakes

Not calling detectChanges after updating data.

Not re-entering Angular zone with run.

runOutsideAngular runs code outside Angular, detectChanges triggers change detection manually, and run re-enters Angular zone.

Practice

1. What is the main role of Zone.js in Angular?

easy

A. It compiles TypeScript to JavaScript.

B. It manages routing between pages.

C. It styles components with CSS.

D. It automatically detects async tasks and triggers UI updates.

Solution

1. Step 1: Understand Zone.js purpose

   Zone.js tracks asynchronous operations like timers and events.

2. Step 2: Connect to Angular UI updates

   When async tasks finish, Zone.js tells Angular to update the screen automatically.

3. Final Answer:

   It automatically detects async tasks and triggers UI updates. -> Option D

4. Quick Check:

   Zone.js auto-detects async tasks = A [OK]

Hint: Zone.js watches async tasks to update UI automatically [OK]

Common Mistakes:

• Confusing Zone.js with routing or styling
• Thinking Zone.js compiles code
• Assuming manual UI updates are needed

2. Which syntax correctly shows how Angular uses Zone.js to detect changes?

easy

A. Zone.detectChanges()

B. ChangeDetector.detectZone()

C. NgZone.run(() => { /* update UI */ })

D. Zone.runOutsideAngular(() => { /* update UI */ })

Solution

1. Step 1: Identify Angular's Zone.js API

   Angular provides NgZone.run() to run code inside Angular's zone for UI updates.

2. Step 2: Check other options

   Other options are not valid Angular Zone.js methods.

3. Final Answer:

   <code>NgZone.run(() => { /* update UI */ })</code> -> Option C

4. Quick Check:

   NgZone.run triggers UI update = B [OK]

Hint: NgZone.run wraps code to trigger Angular updates [OK]

Common Mistakes:

• Using non-existent Zone.js methods
• Confusing runOutsideAngular with run
• Assuming detectChanges is a Zone.js method

3. Given this Angular code snippet, what will happen after 1 second?

constructor(private zone: NgZone) {
  setTimeout(() => {
    this.zone.run(() => {
      this.message = 'Updated!';
    });
  }, 1000);
}

medium

A. The UI does not update because setTimeout is outside Angular zone.

B. The UI updates to show 'Updated!' automatically after 1 second.

C. An error occurs because run() cannot be used inside setTimeout.

D. The message changes but UI needs manual refresh.

Solution

1. Step 1: Analyze setTimeout with NgZone.run

   The setTimeout callback runs inside zone.run(), so Angular detects changes.

2. Step 2: Understand UI update behavior

   Angular automatically updates the UI to show the new message after 1 second.

3. Final Answer:

   The UI updates to show 'Updated!' automatically after 1 second. -> Option B

4. Quick Check:

   NgZone.run triggers UI update = A [OK]

Hint: NgZone.run inside async triggers UI update automatically [OK]

Common Mistakes:

• Thinking setTimeout runs outside Angular zone here
• Believing manual UI refresh is needed
• Assuming run() causes errors inside setTimeout

4. What is wrong with this Angular code that tries to update UI?

constructor(private zone: NgZone) {
  this.zone.runOutsideAngular(() => {
    setTimeout(() => {
      this.message = 'Changed!';
    }, 500);
  });
}

medium

A. UI will not update because changes happen outside Angular zone.

B. setTimeout is not allowed inside runOutsideAngular.

C. NgZone.runOutsideAngular triggers automatic UI update.

D. This code causes a runtime error.

Solution

1. Step 1: Understand runOutsideAngular effect

   Code inside runOutsideAngular does not trigger Angular change detection.

2. Step 2: Analyze setTimeout inside runOutsideAngular

   The message changes but Angular does not detect it, so UI won't update automatically.

3. Final Answer:

   UI will not update because changes happen outside Angular zone. -> Option A

4. Quick Check:

   runOutsideAngular skips UI update = C [OK]

Hint: runOutsideAngular blocks automatic UI updates [OK]

Common Mistakes:

• Assuming setTimeout is disallowed inside runOutsideAngular
• Thinking UI updates automatically anyway
• Believing this code throws errors

5. 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

A. Run calculations inside zone.runOutsideAngular(), then update UI inside zone.run().

B. Run calculations inside zone.run() and update UI outside Angular zone.

C. Run calculations and UI update both inside zone.run().

D. Run calculations and UI update both outside Angular zone.

Solution

1. Step 1: Use runOutsideAngular for heavy work

   Heavy calculations inside runOutsideAngular() avoid triggering UI updates repeatedly.

2. Step 2: Use run to update UI once done

   After calculations, call zone.run() to update UI and trigger change detection.

3. Final Answer:

   Run calculations inside zone.runOutsideAngular(), then update UI inside zone.run(). -> Option A

4. Quick Check:

   Heavy work outside, UI update inside = D [OK]

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

Common 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