NgZone class

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 #runOutsideAngular and if needed, these tasks can reenter the Angular zone via #run.

Example

import 'dart:async';

import 'package:angular/angular.dart';

@Component(
    selector: 'my-app',
    template: '''
      <h1>Demo: NgZone</h1>
      <p>
        Progress: {{progress}}%<br>
        <span *ngIf="progress >= 100">Done processing {{label}} of Angular zone!</span>
        &nbsp;
      </p>
      <button (click)="processWithinAngularZone()">Process within Angular zone</button>
      <button (click)="processOutsideOfAngularZone()">Process outside of Angular zone</button>
    ''')
class AppComponent {
  int progress = 0;
  String label;
  final NgZone _ngZone;

  AppComponent(this._ngZone);

  // Loop inside the Angular zone
  // so the UI DOES refresh after each setTimeout cycle
  void processWithinAngularZone() {
    label = 'inside';
    progress = 0;
    _increaseProgress(() => print('Inside Done!'));
  }

  // Loop outside of the Angular zone
  // so the UI DOES NOT refresh after each setTimeout cycle
  void processOutsideOfAngularZone() {
    label = 'outside';
    progress = 0;
    _ngZone.runOutsideAngular(() {
      _increaseProgress(() {
        // reenter the Angular zone and display done
        _ngZone.run(() => print('Outside Done!'));
      });
    });
  }

  void _increaseProgress(void doneCallback()) {
    progress += 1;
    print('Current progress: $progress%');
    if (progress < 100) {
      new Future<Null>.delayed(const Duration(milliseconds: 10),
          () => _increaseProgress(doneCallback));
    } else {
      doneCallback();
    }
  }
}

Constructors

NgZone({enableLongStackTrace: false })
enabled in development mode as they significantly impact perf.

Properties

hasPendingMacrotasks → bool
Whether there are any outstanding microtasks.
read-only
hasPendingMicrotasks → bool
Whether there are any outstanding microtasks.
read-only
inInnerZone → bool
Whether we are currently executing in the inner zone. This can be used by clients to optimize and call runOutside when needed.
read-only
inOuterZone → bool
Whether we are currently executing in the outer zone. This can be used by clients to optimize and call runInside when needed.
read-only
isRunning → bool
Whether onTurnStart has been triggered and onTurnDone has not.
read-only
onError → Stream
Notify that an error has been delivered.
read-only
onEventDone → Stream
A synchronous stream that fires when the last turn in an event completes. This indicates VM event loop end. [...]
read-only
onMicrotaskEmpty → Stream
Notifies when there is no more microtasks enqueue in the current VM Turn. This is a hint for Angular to do change detection, which may enqueue more microtasks. For this reason this event can fire multiple times per VM Turn.
read-only
onStable → Stream
@Deprecated('Use onTurnDone'), read-only
onTurnDone → Stream
A synchronous stream that fires when the VM turn is finished, which means when the inner (managed) zone has completed it's private microtask queue. [...]
read-only
onTurnStart → Stream
A synchronous stream that fires when the VM turn has started, which means that the inner (managed) zone has not executed any microtasks. [...]
read-only
onUnstable → Stream
@Deprecated('Use onTurnStart'), read-only
hashCode → int
The hash code for this object. [...]
read-only, inherited
runtimeType → Type
A representation of the runtime type of the object.
read-only, inherited

Methods

run<R>(R fn()) → R
Executes the fn function synchronously within the Angular zone and returns value returned by the function. [...]
runGuarded(void fn()) → void
Same as #run, except that synchronous errors are caught and forwarded via onError and not rethrown.
runOutsideAngular(dynamic fn()) → dynamic
Executes the fn function synchronously in Angular's parent zone and returns value returned by the function. [...]
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
inherited
toString() → String
Returns a string representation of this object.
inherited

Operators

operator ==(other) → bool
The equality operator. [...]
inherited

Static Methods

assertInAngularZone() → void
assertNotInAngularZone() → void
isInAngularZone() → bool