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.