{"id":1581,"date":"2022-01-20T13:04:07","date_gmt":"2022-01-20T12:04:07","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=1581"},"modified":"2023-12-14T01:11:04","modified_gmt":"2023-12-14T00:11:04","slug":"ngzone-how-and-when-to-use-it-in-angular","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2022\/01\/20\/ngzone-how-and-when-to-use-it-in-angular\/","title":{"rendered":"NgZone in Angular: How and when to use it."},"content":{"rendered":"\n

A zone is an execution context that persists across async tasks<\/strong>. You can think of it as thread-local storage for JavaScript VMs. Zones in Zone.js are hierarchical. This means that new zones are created by “forking” an existing zone<\/strong>. When you fork a zone, the new zone inherits the behaviours<\/strong> of its parent but can also have additional behaviours or modifications.<\/p>\n\n\n\n

NgZone <\/strong><\/h4>\n\n\n\n

In the context of Angular, the framework doesn\u2019t directly use the root zone. Instead, Angular creates its specialized zone by forking the root zone<\/strong>.<\/p>\n\n\n\n

This forked zone, known as NgZone or sometimes referred to as the “inner zone,” is augmented with Angular-specific behaviors. It’s within this NgZone that Angular tracks changes and decides when to run its change detection.<\/strong><\/p>\n\n\n\n

<\/div>\n\n\n\n

NgZone run()<\/code> and runOutsideOfAngular()<\/code><\/h4>\n\n\n\n

Zone<\/code> handles most asynchronous APIs such as setTimeout()<\/code>, Promise.then()<\/code>, and addEventListener()<\/code>. For the full list, see the Zone Module document<\/a>. In those asynchronous APIs, we don’t need to trigger change detection manually.<\/p>\n\n\n\n

Some third party APIs are not handled by Zone. In those cases, the NgZone<\/a><\/code> service provides a run()<\/code><\/a> method that allows us to run a function inside the Angular zone. This function, and all asynchronous operations in that function, triggers change detection automatically at the correct time.<\/p>\n\n\n\n

export class AppComponent implements OnInit {\n  constructor(private ngZone: NgZone) {}\n  ngOnInit() {\n    \/\/ New async API is not handled by Zone, so you need to use ngZone.run()\n    \/\/ to make the asynchronous operation callback in the Angular zone and\n    \/\/ trigger change detection automatically.\n    someNewAsyncAPI(() => {\n      this.ngZone.run<\/span>(() => {\n        \/\/ update the data of the component\n      });\n    });\n  }\n}<\/code><\/pre>\n\n\n\n
By default, all asynchronous operations are inside the Angular zone, which triggers change detection automatically. Another common case is when you don’t want to trigger change detection. In that situation, you can use another NgZone<\/a><\/code> method: runOutsideAngular()<\/code><\/a>.<\/p>\n\n\n\n
export class AppComponent implements OnInit {\n  constructor(private ngZone: NgZone) {}\n  ngOnInit() {\n    \/\/ You know no data will be updated,\n    \/\/ so you don't want to trigger change detection in this\n    \/\/ specified operation. Instead, call ngZone.runOutsideAngular()\n    this.ngZone.runOutsideAngular<\/span>(() => {\n      setTimeout(() => {\n        \/\/ update component data\n        \/\/ but don't trigger change detection.\n      });\n    });\n  }\n}<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
Setting up Zone.js<\/h4>\n\n\n\n
To make Zone.js available in Angular, we need to import the zone.js<\/code> package. If we are using the Angular CLI, this step is done automatically, and we can see the following line in the src\/polyfills.ts<\/code>:<\/p>\n\n\n\n
\/***************************************************************************************************\n * Zone JS is required by default for Angular itself.\n *\/\nimport 'zone.js';  \/\/ Included with Angular CLI.<\/code><\/pre>\n\n\n\n
Before importing the zone.js<\/code> package, we can set the following configurations:<\/p>\n\n\n\n