Expert Angular

async Pipe

An async pipe allows us to directly map promises or observables into our template view. To understand the async Pipe better, let me throw some light on an observable first.

Observables are Angular-injectable services, which can be used to stream data to multiple sections in the application. In the following code snippet, we use an async pipe as a promise to resolve the list of authors being returned:

<ul id="author-list"> <li *ngFor="let author of authors | async" > <!-- loop the object here --> </li></ul>

The async pipe now subscribes to Observable (authors) and retrieves the last value.

Let's look at examples of how we can use the async pipe as both a Promise and an Observable.

Add the following lines of code in our app.component.ts ...