What are Zones? What is Change Detection? What is NgZone run outside ?

What are Zones? What is NgZone in Angular 2?

Angular 2 runs inside of its own special zone called NgZone and this special zone extends the basic functionality of a zone to facilitate change detection.

It is Running inside a zone allows to detect when asynchronous tasks.

If you change or update your internal application code or view and it is detecting the applications changes with help of NgZone.

Stayed Informed - 69 Best Angular 2 Interview Questions and Answers

Application state change by following things as,

1.     Events – Looks like as click, change, input, submit, etc.

2.     XMLHttpRequests – It’s occurs when we fetch data from a remote service.

3.     Timers – when you use timer methods such as setTimeout (), setInterval (), etc.

What is Change Detection?

Angular 2 runs inside of its own special zone called NgZone and this special zone extends the basic functionality of a zone to facilitate change detection.

A zone is not a concept that is specific to Angular 2 and these Zones features or functionality can be added to any JavaScript application with the inclusion of the “Zone.js” library.

What is NgZone run outside Angular 2?

Execute the “fn” functions asynchronously in Angular’s parent zone and returns value returned by the function.

Syntax- NgZone.runOutsideAngular(fn:() => any): any

Example using NgZone  as,

import { Component, NgZone} from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpModule, Http } from '@angular/http';
import { UserService } from '../service/user.service';
import { AppGlobals } from '../../shared/app.globals';

@Component({
    selector: 'user',
    templateUrl: './user.component.html',
    styleUrls: ['./user.component.css'],
    providers: [UserService, AppGlobals]
})

export class UserComponent {
    //USERS DECLARATIONS.
    users = [];
    label: string;
    counter: number = 0;

    //USER COMPONENT CONSTRUCTOR.
    constructor(private _userService: UserService,
        private _global: AppGlobals,
        private _ngZone: NgZone)
    { }

    //GET USERS SERVICE ON PAGE LOAD and BIND UI GRID.
    ngOnInit() {
        this._userService.getAPIUsers(this._global.baseAPIUrl + 'users/hadley/orgs').subscribe(data => this.users = data);
        this._userService.getAppUsers(this._global.baseAppUrl + 'api/User/GetUsers').subscribe(data => console.log(data));   
    }

    // Loop inside the Angular zone. 
    // The UI will refresh after each setTimeout cycle.
    insideOfAngularZone() {
        this.label = 'inside loop';
        this.counter = 0;
        this._increaseCounter(() => alert('Inside loop completed.'));
    }

    // Loop outside of the Angular zone. 
    // The UI will not refresh after each setTimeout cycle.
    outsideOfAngularZone() {
        this.label = 'outside loop';
        this.counter = 0;
        this._ngZone.runOutsideAngular(() => {
            this._increaseCounter(() => {
                this._ngZone.run(() => {
                    alert('Outside loop completed.');
                });
            });
        });
    }

    _increaseCounter(doCallback: () => void) {
        this.counter += 2;

        if (this.counter <= 1000) {
            window.setTimeout(() => {
                this._increaseCounter(doCallback);
            }, 100);
        }
        else {
            doCallback();
        }
    }  
}
//END BEGIN - USER-COMPONENT

I hope you are enjoying with this post! Please share with you friends. Thank you!!