Zone.js and automatic detection in Angular

Introduction

Zone.js helps Angular know when to update the screen automatically. It watches for changes in your app without you needing to tell it.

When you want Angular to refresh the view after a user clicks a button.

When your app gets data from the internet and you want the screen to update automatically.

When you use timers like setTimeout and want Angular to detect changes after they run.

When you want to avoid manually telling Angular to check for updates.

Syntax

Angular

Zone.current.run(() => {
  // your code here
});

Zone.js patches async operations like events, timers, and promises to detect changes.

Angular uses Zone.js internally, so you usually don't need to call it directly.

Examples

Zone.js detects this timer and tells Angular to update the view after 1 second.

Angular

setTimeout(() => {
  console.log('Timer done');
}, 1000);

This runs code inside the current zone, so Angular knows to check for changes after it finishes.

Angular

Zone.current.run(() => {
  console.log('Run inside zone');
});

Sample Program

This Angular component shows a counter and a button. When you click the button, a timer runs for 1 second. Zone.js detects the timer and automatically updates the counter on the screen without extra code.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>Counter: {{ counter }}</h1>
    <button (click)="startTimer()">Start Timer</button>
  `
})
export class AppComponent {
  counter = 0;

  startTimer() {
    setTimeout(() => {
      this.counter++;
    }, 1000);
  }
}

Important Notes

You usually don't need to interact with Zone.js directly in Angular apps.

If you run code outside Angular's zone, the view won't update automatically.

You can use NgZone service to run code inside or outside the Angular zone if needed.

Summary

Zone.js helps Angular know when to update the screen automatically.

It watches async tasks like timers and events without extra code.

This makes your app update smoothly and easily.

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