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
What is NgZone run outside Angular 2?

What is NgZone run outside Angular 2?

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

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

Example 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

NgZone -

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