Angular Zone.js & Change Detection: Understanding the Core Concepts

Angular is a popular JavaScript framework that is widely used to build dynamic and robust web applications. One of the key features of Angular is its powerful change detection mechanism, which is responsible for detecting changes in the application and updating the view accordingly. In this article, we will explore the core concepts of Angular’s change detection mechanism and how it is implemented using Zone.js.

Understanding Angular’s Change Detection Mechanism

Angular’s change detection mechanism is responsible for detecting changes in the application and updating the view accordingly. This mechanism ensures that the view is always in sync with the model, providing a smooth and responsive user experience.

Angular’s change detection mechanism works by traversing the component tree and checking for changes in each component. When a change is detected, the change detection mechanism updates the view and propagates the changes to any child components.

Zone.js and Change Detection in Angular

Zone.js is a library that provides a mechanism for wrapping JavaScript code and executing it in a specific context or zone. In Angular, Zone.js is used to create a new zone for each component and to track changes within that component’s zone.

Each time a component is created, Angular creates a new zone for that component. The zone tracks any changes that occur within the component and triggers the change detection mechanism when necessary.

Here’s an example of how to use Zone.js in an Angular application:

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

@Component({
  selector: 'my-app',
  template: `
    <button (click)="onClick()">Click me</button>
    <div>{{ message }}</div>
  `,
})
export class AppComponent {
  message = 'Hello';

  constructor(private ngZone: NgZone) {}

  onClick() {
    this.ngZone.run(() => {
      this.message = 'World';
    });
  }
}

In the above example, we have defined a simple Angular component that contains a button and a message. When the button is clicked, the message is updated to “World”. We use the **NgZone **service to create a new zone for the component and to run the onClick function within that zone.

How does Zone.js know when an event has happened?

In order to know when an event has happened, Zone.js uses a concept called “zone hooks”. Zone hooks are functions that are executed before and after asynchronous operations, and they provide an opportunity to intercept and monitor those operations.

In the case of event listeners, Zone.js provides a hook called onHandleEvent. This hook is executed before the event listener is called, and it provides an opportunity to intercept and monitor the event. Here's an example:

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

@Component({
  selector: 'app-root',
  template: `
    <button (click)="handleClick()">Click Me</button>
  `,
})
export class AppComponent {
  constructor(private zone: NgZone) {}

  handleClick() {
    this.zone.runOutsideAngular(() => {
      document.addEventListener('click', this.onClick);
    });
  }

  onClick = () => {
    console.log('Click event detected!');
  };
}

In this example, we have an Angular component that displays a button. When the button is clicked, we use Zone.js to run the handleClick() method outside of the Angular zone. This ensures that the event listener is registered outside of the Angular zone, so that changes within the component tree do not trigger change detection.

Inside the handleClick() method, we use document.addEventListener to register an event listener for the click event.

Before the event listener is called, Zone.js executes the onHandleEvent hook. This hook provides an opportunity to intercept and monitor the event. In this example, we have defined an arrow function called onClick that logs a message to the console when the click event is detected.

By using Zone.js and the onHandleEvent hook, we can intercept and monitor events in our Angular applications, and take actions based on those events. This allows us to build powerful and responsive applications that can handle complex and dynamic scenarios.

** How many zones does Angular use?**

Answer — Two Zones (Inner and Outer zone)

Angular provides the NgZone service, which allows us to run code inside or outside of the Angular zone. Here's an example:

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

@Component({
  selector: 'app-root',
  template: `
    <button (click)="handleClick()">Click Me</button>
  `,
})
export class AppComponent {
  constructor(private zone: NgZone) {}

  handleClick() {
    this.zone.runOutsideAngular(() => {
      // Code to run outside of the Angular zone
    });
  }
}

In this example, we have an Angular component with a button. When the button is clicked, we use the NgZone service to run some code outside of the Angular zone. Inside the handleClick() method, we call the runOutsideAngular() method of the NgZone service, and pass in a function to be executed outside of the Angular zone.

Any code that we want to run outside of the Angular zone should be placed inside this function. This can be useful when we want to perform some long-running or resource-intensive operation, such as interacting with a third-party library, that we don’t want to trigger change detection in the component tree.

Similarly, we can also use the run() method of the NgZone service to run code inside the Angular zone. Here's an example:

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

@Component({
  selector: 'app-root',
  template: `
    <button (click)="handleClick()">Click Me</button>
  `,
})
export class AppComponent {
  constructor(private zone: NgZone) {}

  handleClick() {
    this.zone.run(() => {
      // Code to run inside the Angular zone
    });
  }
}

In this example, we use the run() method of the NgZone service to run some code inside the Angular zone. Inside the handleClick() method, we call the run() method of the NgZone service, and pass in a function to be executed inside the Angular zone.

Any code that we want to run inside the Angular zone should be placed inside this function. This can be useful when we want to trigger change detection in the component tree, or interact with Angular-specific APIs such as @Input() and @Output()

By using the NgZone service and its run() and runOutsideAngular() methods, we can control when and where change detection occurs in our Angular applications, and optimize performance and responsiveness.

Can we use these zones on-demand?

Yes, in Angular we can use zones on-demand by creating a new zone manually. This allows us to specify which code should run within a specific zone, and gives us finer-grained control over change detection and error handling.

To create a new zone, we can use the Zone class provided by the zone.js library. Here's an example:

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

@Component({
  selector: 'app-root',
  template: `
    <button (click)="runInZone()">Run In Zone</button>
    <button (click)="runOutsideZone()">Run Outside Zone</button>
  `,
})
export class AppComponent {
  constructor(private zone: NgZone) {}

  runInZone() {
    const myZone = Zone.current.fork({
      name: 'My Zone',
      onInvokeTask: (parentZoneDelegate, currentZone, targetZone, task, applyThis, applyArgs) => {
        console.log('Task invoked in My Zone:', task.source);
        parentZoneDelegate.invokeTask(targetZone, task, applyThis, applyArgs);
      },
      onHandleError: (parentZoneDelegate, currentZone, targetZone, error) => {
        console.log('Error occurred in My Zone:', error.message);
        parentZoneDelegate.handleError(targetZone, error);
      },
    });

    myZone.run(() => {
      console.log('Running code in My Zone...');
    });
  }

  runOutsideZone() {
    this.zone.runOutsideAngular(() => {
      console.log('Running code outside of Angular zone...');
    });
  }
}

In this example, we have an Angular component that displays two buttons. When the “Run In Zone” button is clicked, we create a new zone called “My Zone” using the Zone.current.fork() method. This method creates a new zone by forking the current zone, and allows us to specify the behavior of the new zone using an object literal.

In the onInvokeTask hook, we intercept and monitor tasks that are invoked within "My Zone". In this example, we simply log a message to the console that indicates the task source. We also callparentZoneDelegate.invokeTask() to run the task within the parent zone.

In the onHandleError hook, we intercept and handle errors that occur within "My Zone". In this example, we simply log a message to the console that indicates the error message. We also call parentZoneDelegate.handleError() to propagate the error to the parent zone.

Finally, we use the myZone.run() method to run some code within "My Zone". In this example, we simply log a message to the console that indicates that we are running code within "My Zone".

When the “Run Outside Zone” button is clicked, we use the zone.runOutsideAngular() method to run some code outside of the Angular zone. This is useful when we want to run code that should not trigger change detection or error handling within our Angular application.

By using zones on-demand, we can have fine-grained control over change detection and error handling within our Angular applications. This allows us to build more robust and responsive applications that can handle complex and dynamic scenarios.

Conclusion

In summary,** Angular’s change detection mechanism** is responsible for tracking changes within the component tree and updating the view accordingly. Zone.js is a powerful library that enables developers to intercept and monitor asynchronous operations, such as setTimeout, setInterval, and event listeners.

By using Zone.js in Angular, we can track changes within the component tree and update the view accordingly. This helps to ensure that our Angular applications are performant and responsive, even in complex and dynamic scenarios.

Thanks for reading