python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
NgZone angular2

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.

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!!
ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions