Learn About the Role of Zones in Angular 2

1
4338
Zones

Zones

In this article, we are going to discuss and learn about the role of Zones played in Angular 2. Zones are a sort of execution context that allows us to hook into our asynchronous tasks.

Zones in Angular 2.0
Zones are a great fit for Angular 2 as they help provide whatever is required by Angular in order to perform change detection in the applications. Application state change is caused by the following things.

  • Events – these are the user events such as click, change, input, submit, etc.
  • XMLHttpRequests – Such thing occurs when we fetch data from a remote service.
  • Timers – when we use timer methods such as setTimeout (), setInterval (), etc.

All of these three things are asynchronous in nature. These things when triggered could change the application status. Let us understand zones in Angular 2.0 in detail with the help of the following example.

Zones in Angular 2.0 Demonstration
Say for example, we have an Angular component that executes a handler when we click a button. Such demonstration will show the execution inside Angular’s zone in order to ensure that the framework is notified when an event has triggered. In the same example, we are going to demonstrate how the code can be executed outside Angular’s zone, which refrains the GUI from getting updated after every event is triggered.

Angular 2.0 coding for Tabs Component
app/main.ts

Explanation of Code:
The above main.ts file is used to Bootstrap the angular 2.0 app that uses the root component from the NgModule.
app/Module.ts

Explanation of Code:
The root App Module typescript file is present in the app package. Here, we are importing the NgModule, BrowserModule, NgZoneDemoComponent, and AppComponent classes as shown above. The @NgModule decorator is declared here that has imports, declaration classes and bootstrap class to start the app.
app/Component.ts

Explanation of Code:
Here, we are declaring the component with selector as ‘my-zone-app’ and templateUrl as ‘resource/app-component.html’ that has the required HTML code to render on the web page. The controller class ‘AppComponent’ has a title variable with the value as “Zones in Angular 2.0”.
resource/app.component.html

Explanation of Code:
Here, we are using the tag as ‘ng-zone-demonstration’ where we are calling the ‘ng-zone.Component.ts’ app logic to process the code inside as well as outside of the Angular zone. Rest are the supporting text fields which will be displayed on the web page.
app/ng-zone.Component.ts

Explanation of Code:
In the ‘app.component.html’ file we have used the tag ‘ng-zone-demonstration’ which is nothing but the component selector that has underlying ng zone logic defined in the template file ‘resource/ng-zone.Component.html’ as shown below. It has the controller class ‘NgZoneDemoComponent’, where we are declaring the variables progress as number type and label as string type. The constructor used here accepts the instance of NgZone as_ngZone. NgZone is nothing but a forked zone that extends its API and adds some additional functionality to its execution context. It adds to the API the custom events to which we can subscribe. Later, we are defining two methods i.e. ‘withinAngularZoneProcess ()’ to process the code within the angular zone and ‘outsideOfAngularZoneProcess ()’ to process the code outside the angular zone as shown above. These methods are called on the button click events as specified in the template file ‘ng-zone.Component.html’ as explained below.
resource/ng-zone.Component.html

Explanation of Code:
It is the actual HTML code associated with the template file of ‘app/ng-zone.Component.ts’. It has two buttons with the name as ‘Process within the Angular zone’ and ‘Process outside of the Angular zone’. Each of these buttons has the click event associated with the action which calls the methods ‘withinAngularZoneProcess ()’ or ‘outsideOfAngularZoneProcess ()’ respectively as shown above. The *ngIf condition is used to evaluate the count associated with the progress number type variable and display the text ‘Done processing {{label}} of the Angular zone!’ when it exceeds the value of 1000.
assets/styles.css

Explanation of Code:
It is the stylesheet used to style the text on the web page of the app.
Index.html

Explanation of Code:
It is the ‘index.html’ file that has the ‘my-zone-app’ tag in its body section i.e. selector of ‘Component’ to load and display the complete application. Here, we are including all the paths for the scripts which are required for the Angular 2.0 build as shown above.

Output
When we run the above angular 2.0 app for zone components by executing the command ‘npm start’ on command line that has pointer to the application’s root directory ‘my-zone-component-app’ then we will observe the following output.
Zones Component

Source code for the zone component app in Angular 2.0

Conclusion: –
In this chapter, we developed a zone component app in Angular 2.0 to demonstrate the processing inside as well as outside of the Angular zone.

1 COMMENT

  1. Nice blog! Thanks for sharing your info. I truly appreciate your efforts and I am waiting for your next write ups thank you once again. Please also come and visit into my website at

LEAVE A REPLY

Please enter your comment!
Please enter your name here