What is Async Pipe in Angular: Simple Explanation and Example

The async pipe in Angular automatically subscribes to an Observable or Promise and returns the latest value it emits. It also handles unsubscribing when the component is destroyed, simplifying asynchronous data handling in templates.

How It Works

The async pipe acts like a helpful assistant that listens to data streams (Observables or Promises) for you. Imagine you are waiting for a friend to send you messages. Instead of checking your phone repeatedly, the async pipe automatically updates your view whenever a new message arrives.

It subscribes to the data source when the component loads and unsubscribes when the component is removed, so you don't have to worry about cleaning up. This keeps your app efficient and prevents memory leaks.

Example

This example shows how to use the async pipe to display data from an Observable in the template without manual subscription.

typescript

import { Component } from '@angular/core';
import { Observable, interval } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-async-pipe-demo',
  template: `
    <h3>Seconds elapsed: {{ seconds$ | async }}</h3>
  `
})
export class AsyncPipeDemoComponent {
  seconds$: Observable<number> = interval(1000).pipe(
    map(val => val + 1) // count seconds starting from 1
  );
}

Output

Seconds elapsed: 1
Seconds elapsed: 2
Seconds elapsed: 3
... (updates every second)

When to Use

Use the async pipe whenever you want to display data from asynchronous sources like Observables or Promises directly in your Angular templates. It is especially useful for live data streams, HTTP requests, or timers.

It saves you from writing extra code to subscribe and unsubscribe manually, reducing bugs and making your code cleaner. For example, use it to show live updates, fetch API data, or handle user input events asynchronously.

Key Points

• The async pipe subscribes to Observables or Promises and returns their latest value.
• It automatically unsubscribes when the component is destroyed, preventing memory leaks.
• It simplifies template code by removing the need for manual subscription management.
• Works well with live data streams, HTTP calls, and timers.

Key Takeaways

The async pipe automatically subscribes and unsubscribes to Observables or Promises in templates.

It updates the view with the latest emitted value without manual code.

Use it to simplify handling of asynchronous data streams in Angular templates.

It helps prevent memory leaks by cleaning up subscriptions automatically.