pipe
impure
Unwraps a value from an asynchronous primitive.
{{ obj_expression | async }}
obj | Observable |
The async
pipe subscribes to an Observable
or Promise
and returns the latest value it has emitted. When a new value is emitted, the async
pipe marks the component to be checked for changes. When the component gets destroyed, the async
pipe unsubscribes automatically to avoid potential memory leaks.
This example binds a Promise
to the view. Clicking the Resolve
button resolves the promise.
@Component({ selector: 'async-promise-pipe', template: `<div> <code>promise|async</code>: <button (click)="clicked()">{{ arrived ? 'Reset' : 'Resolve' }}</button> <span>Wait for it... {{ greeting | async }}</span> </div>` }) export class AsyncPromisePipeComponent { greeting: Promise<string>|null = null; arrived: boolean = false; private resolve: Function|null = null; constructor() { this.reset(); } reset() { this.arrived = false; this.greeting = new Promise<string>((resolve, reject) => { this.resolve = resolve; }); } clicked() { if (this.arrived) { this.reset(); } else { this.resolve!('hi there!'); this.arrived = true; } } }
It's also possible to use async
with Observables. The example below binds the time
Observable to the view. The Observable continuously updates the view with the current time.
@Component({ selector: 'async-observable-pipe', template: '<div><code>observable|async</code>: Time: {{ time | async }}</div>' }) export class AsyncObservablePipeComponent { time = new Observable<string>((observer: Observer<string>) => { setInterval(() => observer.next(new Date().toString()), 1000); }); }
© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v10.angular.io/api/common/AsyncPipe