Zone.js and automatic detection in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Zone.js detect changes in Angular?

Angular uses Zone.js to automatically detect changes. What triggers Angular's change detection when using Zone.js?

A Angular runs change detection only once when the app starts and never again.

B Only manual calls to detectChanges() trigger Angular's change detection.

C Angular detects changes only when the user clicks a button explicitly calling a method.

D Any asynchronous event like setTimeout, promises, or DOM events triggers Angular's change detection automatically.

💡 Hint

Think about what Zone.js wraps to know when to update the UI.

Zone.js patches asynchronous APIs like setTimeout, promises, and DOM events. When these complete, Angular runs change detection automatically.

❓ lifecycle

intermediate

What happens if you run code outside Angular's zone?

If you run code inside Angular's NgZone.runOutsideAngular(), what is the effect on change detection?

A Angular disables the entire app until you manually re-enter the zone.

B Angular will run change detection twice for every asynchronous event.

C Angular will not run change detection automatically for that code's asynchronous events.

D Angular runs change detection normally without any difference.

💡 Hint

Consider what 'outside Angular's zone' means for automatic updates.

Running code outside Angular's zone means Zone.js does not track those async events, so Angular won't trigger change detection automatically.

📝 Syntax

advanced

Identify the correct way to run code outside Angular's zone

Which code snippet correctly runs a function outside Angular's zone to avoid triggering change detection?

Angular

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

@Component({ selector: 'app-root', template: '' })
export class AppComponent {
  constructor(private ngZone: NgZone) {}

  runTask() {
    // Which option below correctly runs outside Angular's zone?
  }
}

A this.ngZone.runOutsideAngular(() => { setTimeout(() => console.log('Task done'), 1000); });

B this.ngZone.run(() => { setTimeout(() => console.log('Task done'), 1000); });

C setTimeout(() => console.log('Task done'), 1000);

D this.ngZone.runOutsideAngular; setTimeout(() => console.log('Task done'), 1000);

💡 Hint

Look for the method that explicitly runs code outside Angular's zone.

NgZone's runOutsideAngular() method runs the callback outside Angular's zone, preventing automatic change detection.

🔧 Debug

advanced

Why does Angular not update the view after an async event?

You run an HTTP request inside NgZone.runOutsideAngular(), but the view does not update after the response. Why?

A Because running outside Angular's zone prevents automatic change detection after async events.

B Because HTTP requests never trigger change detection in Angular.

C Because Angular only updates views on user input events.

D Because the component's template is missing a binding for the data.

💡 Hint

Think about what happens when you run code outside Angular's zone.

Running code outside Angular's zone disables automatic change detection, so the view won't update unless you manually trigger it.

🧠 Conceptual

expert

What is the main purpose of Zone.js in Angular?

Why does Angular use Zone.js under the hood for change detection?

A To allow Angular to run outside the browser environment like Node.js without changes.

B To automatically detect when asynchronous tasks complete and trigger change detection without manual calls.

C To replace JavaScript's event loop with a custom one for better performance.

D To provide a new syntax for writing asynchronous code in Angular templates.

💡 Hint

Think about how Angular knows when to update the UI after async work.

Zone.js patches async APIs so Angular knows when async tasks finish and can run change detection automatically, avoiding manual calls.