An async pipe awaits for a value from a Future or Stream. When a value is received, the async pipe marks the component to be checked for changes.

Example

@Component(
    selector: 'async-greeter',
    template: '''
      <div>
        <p>Wait for it ... {{ greeting | async }}</p>
        <button [disabled]="!done" (click)="tryAgain()">Try Again!</button>
      </div>''')
class AsyncGreeterPipe {
  static const _delay = const Duration(seconds: 2);

  Future<String> greeting;
  bool done;

  AsyncGreeterPipe() {
    tryAgain();
  }

  String greet() {
    done = true;
    return "Hi!";
  }

  void tryAgain() {
    done = false;
    greeting = new Future<String>.delayed(_delay, greet);
  }
}

@Component(
    selector: 'async-time',
    template: "<p>Time: {{ time | async | date:'mediumTime'}}</p>") //
class AsyncTimePipe {
  static const _delay = const Duration(seconds: 1);
  final Stream<DateTime> time =
      new Stream.periodic(_delay, (_) => new DateTime.now());
}
Implements
Annotations
  • @Pipe('async', pure: false)

Constructors

AsyncPipe(ChangeDetectorRef _ref)

Properties

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

ngOnDestroy() → void
Executed before the directive is removed from the DOM and destroyed. [...]
transform(obj) → dynamic
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