zone.js, NgZone, and ApplicationRef in Angular
If you are working with Angular for a while, you might have observed that the application template gets updated automatically whenever the application state changes. Angular makes it happen by triggering the change detection whenever the events happened in the application, leading to state change.
How is Angular automatically triggering change detection? Answer is zone.js
What is zone.js? And why the Angular team decided to include this as part of the Angular application.
In any application, asynchronous operations are very common, and mostly all asynchronous operations lead to a change in the state. Once these asynchronous operations are done, the developer can run the change detection method manually to update the template view. But the developer doesn’t know how much time the asynchronous operations take to complete. And if the application is vast, triggering change detection manually for every task where the state is changed is not easy and this might prone to errors. Here zone.js comes into the picture, To track the completion of an asynchronous operation and inform the angular to run change detection and update the view with the changes.
How zone.js is tracking Angular asynchronous operations?
zone.js monkey patches the native browser APIs like timers, XHR, and other events related to DOM API. And also it provides an execution context in which it tracks and intercepts the asynchronous operations. To track the status of these events it keeps eye on the microtasks(XHR) and macro tasks(timers and DOM events) queues so that it can inform angular when to run the change detection.
Now we know that zone.js can manage and track the status of the application’s asynchronous operations. But how does it inform about the status of these operations to an angular application?
NgZone:
Angular creates its own wrapper called NgZone around zone.js. What it does is, fork and create a new zone called angular and inherit some properties and methods from it. NgZone is provided as an injectable so that we can inject it as a service and utilize it in our application. And it also provides 4 life cycle hooks, we can utilize these hooks in our application to track the status of any operation. Below is the NgZone class and 4 Event Emitters are the life cycle hooks.
run() and runOutsideAngular() are the important and most commonly used methods from NgZone class.
The tick() method of an ApplicationRef class is invoked inside the run() method to trigger the change detection. As well when you run any task outside the Angular zone and you want to bring it back into the Angular zone, trigger change detection. you can utilize this method.
runOutsideAngular() method is used when you want to run the tasks outside of the zone so that Angular can ignore running change detection for these tasks. For example, heavy tasks which not change the application’s state can be written outside of the zone. This helps in application performance improvement.
Earlier we mentioned, the run() method invoking a tick() method of ApplicationRef class to trigger the change detection. What is ApplicationRef class and when Angular creates this class?
On the top level of every angular application, Angular creates an ApplicationRef class. This is nothing but a reference to an Angular application running on a page. This holds all the information related to an application, like registered components, component Types, views, and tick method which is responsible for triggering change detection in the application.
This is how change detection gets triggered whenever any event occurred in the Angular application.
By default zone.js patches all browser APIs in it, If you want to ignore running change detection for any browser events you can mention those in a file called zone-falgs.ts like below and import it before zone.js inside the polyfills.ts file so that it unpatch the events mentioned in this file.
This is all about zone.js, NgZone, and ApplicationRef class and how Angular uses all these to trigger the change detection.
Angular change detection is a vast topic to explain. Here I concentrated only on how change detection gets triggered. I will try to cover more things related to this in other blogs.
Thanks for reading. Hope this blog helped you. Happy Learning :)
