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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
By using ngZone.runOutsideAngular(), you can execute code that won’t trigger change detection, significantly improving performance.<\/p>\n\n\n\n
import { Component, NgZone, OnInit } from '@angular\/core';\n \n@Component({\n selector: 'app-stock-ticker',\n template: `Price: {{ price }}`\n})\nexport class StockTickerComponent implements OnInit {\n price: number;\n \n constructor(private ngZone: NgZone) {}\n \n ngOnInit() {\n\tthis.ngZone.runOutsideAngular(() => {\n \t\/\/ Connect to a high-frequency data stream\n \tconst stockPriceSocket = new WebSocket('wss:\/\/stock-prices.com');\n \n \tstockPriceSocket.onmessage = (event) => {\n \t\/\/ We are outside Angular's zone, so this doesn't trigger change detection\n \tthis.updatePrice(JSON.parse(event.data).price);\n \t};\n\t});\n }\n \n \/\/ Use a throttled function to update the view periodically\n updatePrice = throttle((price) => {\n\t\/\/ Run back inside the zone to update the view\n\tthis.ngZone.run(() => {\n \tthis.price = price;\n\t});\n }, 250);\n}<\/code><\/pre>\n\n\n\nFinal Words<\/h2>\n\n\n\n
NgZone lets Angular track async operations and trigger change detection. But for high-frequency tasks that don\u2019t 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 <\/strong>hire Angular developers<\/a> with deep performance tuning experience.<\/p>\n","protected":false},"excerpt":{"rendered":"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 […]<\/p>\n","protected":false},"author":2,"featured_media":2332,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7,3],"tags":[],"class_list":["post-2330","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/2330","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/comments?post=2330"}],"version-history":[{"count":2,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/2330\/revisions"}],"predecessor-version":[{"id":2334,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/2330\/revisions\/2334"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/media\/2332"}],"wp:attachment":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/media?parent=2330"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/categories?post=2330"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/tags?post=2330"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}