{ "id": "api/common/AsyncPipe", "title": "AsyncPipe", "contents": "\n\n
\n
\n
\n \n API > @angular/common\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

AsyncPipelink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

Unwraps a value from an asynchronous primitive.

\n\n

See more...

\n
\n \n \n \n
\n {{ obj_expression | async }}\n\n

NgModulelink

\n\n\n\n\n \n

Input valuelink

\n \n \n \n \n \n \n \n \n \n
\n \n obj\n Subscribable | Promise\n \n \n
\n \n \n
\n\n\n \n\n \n\n
\n

Descriptionlink

\n

The async pipe subscribes to an Observable or Promise and returns the latest value it has\nemitted. When a new value is emitted, the async pipe marks the component to be checked for\nchanges. When the component gets destroyed, the async pipe unsubscribes automatically to avoid\npotential memory leaks.

\n\n

Further information available in the Usage Notes...

\n
\n\n\n \n
\n

Usage noteslink

\n

Exampleslink

\n

This example binds a Promise to the view. Clicking the Resolve button resolves the\npromise.

\n\n@Component({\n selector: 'async-promise-pipe',\n template: `<div>\n <code>promise|async</code>:\n <button (click)=\"clicked()\">{{ arrived ? 'Reset' : 'Resolve' }}</button>\n <span>Wait for it... {{ greeting | async }}</span>\n </div>`\n})\nexport class AsyncPromisePipeComponent {\n greeting: Promise<string>|null = null;\n arrived: boolean = false;\n\n private resolve: Function|null = null;\n\n constructor() {\n this.reset();\n }\n\n reset() {\n this.arrived = false;\n this.greeting = new Promise<string>((resolve, reject) => {\n this.resolve = resolve;\n });\n }\n\n clicked() {\n if (this.arrived) {\n this.reset();\n } else {\n this.resolve!('hi there!');\n this.arrived = true;\n }\n }\n}\n\n\n

It's also possible to use async with Observables. The example below binds the time Observable\nto the view. The Observable continuously updates the view with the current time.

\n\n@Component({\n selector: 'async-observable-pipe',\n template: '<div><code>observable|async</code>: Time: {{ time | async }}</div>'\n})\nexport class AsyncObservablePipeComponent {\n time = new Observable<string>((observer: Observer<string>) => {\n setInterval(() => observer.next(new Date().toString()), 1000);\n });\n}\n\n\n\n
\n\n\n\n
\n
\n\n\n" }