What is the purpose of AsyncPipe in Angular?

The AsyncPipe is used to subscribe to an observable or promise and return the latest value it has emitted. When a new value is emitted, the pipe marks the component that has been checked for changes.

See the following example where a time observable continuously updates the view for every 2 seconds with the current time.

Example:

  1. @Component({  
  2.   selector: ‘async-observable-pipe’,  
  3.   template: `<div><code>observable|async</code>:  
  4.        Time: {{ time | async }}</div>`  
  5. })  
  6. export class AsyncObservablePipeComponent {  
  7.   time = new Observable(observer =>  
  8.     setInterval(() => observer.next(new Date().toString()), 2000)  
  9.   );  
  10. }