
p.location-badge.
  exported from <a href='../core'>angular2/core</a>
  defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.37/modules/angular2/src/core/zone/ng_zone.ts#L6-L351">angular2/src/core/zone/ng_zone.ts (line 6)</a>

:markdown
  An injectable service for executing work inside or outside of the Angular zone.
  
  The most common use of this service is to optimize performance when starting a work consisting of
  one or more asynchronous tasks that don't require UI updates or error handling to be handled by
  Angular. Such tasks can be kicked off via <a href='#runOutsideAngular'>runOutsideAngular</a> and if needed, these tasks
  can reenter the Angular zone via <a href='#run'>run</a>.
  
  <!-- TODO: add/fix links to:
    - docs explaining zones and the use of zones in Angular and change-detection
    - link to runOutsideAngular/run (throughout this file!)
    -->
  
  ### Example ([live demo](http://plnkr.co/edit/lY9m8HLy7z06vDoUaSN2?p=preview))
  ```
  import {Component, View, NgIf, NgZone} from 'angular2/angular2';
  
  @Component({
    selector: 'ng-zone-demo'
  })
  @View({
    template: `
      <h2>Demo: NgZone</h2>
  
      <p>Progress: {{progress}}%</p>
      <p *ng-if="progress >= 100">Done processing {{label}} of Angular zone!</p>
  
      <button (click)="processWithinAngularZone()">Process within Angular zone</button>
      <button (click)="processOutsideOfAngularZone()">Process outside of Angular zone</button>
    `,
    directives: [NgIf]
  })
  export class NgZoneDemo {
    progress: number = 0;
    label: string;
  
    constructor(private _ngZone: NgZone) {}
  
    // Loop inside the Angular zone
    // so the UI DOES refresh after each setTimeout cycle
    processWithinAngularZone() {
      this.label = 'inside';
      this.progress = 0;
      this._increaseProgress(() => console.log('Inside Done!'));
    }
  
    // Loop outside of the Angular zone
    // so the UI DOES NOT refresh after each setTimeout cycle
    processOutsideOfAngularZone() {
      this.label = 'outside';
      this.progress = 0;
      this._ngZone.runOutsideAngular(() => {
        this._increaseProgress(() => {
        // reenter the Angular zone and display done
        this._ngZone.run(() => {console.log('Outside Done!') });
      }}));
    }
  
  
    _increaseProgress(doneCallback: () => void) {
      this.progress += 1;
      console.log(`Current progress: ${this.progress}%`);
  
      if (this.progress < 100) {
        window.setTimeout(() => this._increaseProgress(doneCallback)), 10)
      } else {
        doneCallback();
      }
    }
  }
  ```
  
  
.l-main-section
  h2 Members
  .l-sub-section
    h3#run run

    
    pre.prettyprint
      code.
        run(fn: () =&gt; any)
    
    :markdown
      Executes the `fn` function synchronously within the Angular zone and returns value returned by
      the function.
      
      Running functions via `run` allows you to reenter Angular zone from a task that was executed
      outside of the Angular zone (typically started via <a href='#runOutsideAngular'>runOutsideAngular</a>).
      
      Any future tasks or microtasks scheduled from within this function will continue executing from
      within the Angular zone.
      
      





  .l-sub-section
    h3#runOutsideAngular runOutsideAngular

    
    pre.prettyprint
      code.
        runOutsideAngular(fn: () =&gt; any)
    
    :markdown
      Executes the `fn` function synchronously in Angular's parent zone and returns value returned by
      the function.
      
      Running functions via `runOutsideAngular` allows you to escape Angular's zone and do work that
      doesn't trigger Angular change-detection or is subject to Angular's error handling.
      
      Any future tasks or microtasks scheduled from within this function will continue executing from
      outside of the Angular zone.
      
      Use <a href='#run'>run</a> to reenter the Angular zone and do work that updates the application model.
      
      




