What is the purpose of async pipe?

The AsyncPipe subscribes to an observable or promise and returns the latest value it has emitted. When a new value is emitted, the pipe marks the component to be checked for changes.

Let's take a time observable which continuously updates the view for every 2 seconds 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((observer) =>
setInterval(() => observer.next(new Date().toString()), 2000),
);
}

July 27, 2022
699