What are “zones” in Angular?

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.