What are “zones” in Angular?

Dr. Sumedh Kanade
kanade/dev
Published in
1 min readJun 22, 2020

--

A “zone” is a way to persist execution context across asynchronous tasks. Angular uses zones to enable automatic change detection in response to changes made by asynchronous tasks. For example, a change fired by some code in a setTimeout is obviously asynchronous, yet Angular will automatically detect any changes made by that asynchronous code — as long as the setTimeout runs in the application’s zone (which it does by default).

Angular lets us work with zones using the NgZone service, which builds on zone.js.

You can, if you wish, choose to run an asynchronous task outside the angular zone using the runOutsideOfAngular(..) method. Changes outside the angular zone will not be automatically detected.

Image source.

--

--

Dr. Sumedh Kanade
kanade/dev

Trained as a physician, and software engineer. Passionate about using technology to make a difference in healthcare. Dev blog at: https://medium.com/kanade-dev