NgZone is Angular’s wrapper around Zone.js, a library that patches asynchronous browser APIs (like setTimeout, addEventListener) to automatically trigger change detection when they complete.
However, for frequent, high-frequency events that don’t require immediate UI updates (e.g., mouse move tracking, real-time data streams from a WebSocket), running them inside the zone can cause excessive, unnecessary change detection cycles.
By using ngZone.runOutsideAngular(), you can execute code that won’t trigger change detection, significantly improving performance.
Practical Example (Stock Ticker):
import { Component, NgZone, OnInit } from '@angular/core';
@Component({ selector: 'app-stock-ticker', template: `Price: {{ price }}`
})
export class StockTickerComponent implements OnInit { price: number; constructor(private ngZone: NgZone) {} ngOnInit() { this.ngZone.runOutsideAngular(() => { // Connect to a high-frequency data stream const stockPriceSocket = new WebSocket('wss://stock-prices.com'); stockPriceSocket.onmessage = (event) => { // We are outside Angular's zone, so this doesn't trigger change detection this.updatePrice(JSON.parse(event.data).price); }; }); } // Use a throttled function to update the view periodically updatePrice = throttle((price) => { // Run back inside the zone to update the view this.ngZone.run(() => { this.price = price; }); }, 250);
}Final Words
NgZone lets Angular track async operations and trigger change detection. But for high-frequency tasks that don’t impact the UI immediately, like live data streams, you can skip change detection using runOutsideAngular() to boost performance. This is especially useful in real-time apps. To use it well, it’s smart to hire Angular developers with deep performance tuning experience.
