Angular Async Pipe

What is Async Pipe in Angular?

The async pipe subscribes to an Observable in the template, renders the latest value, and unsubscribes automatically when the component is destroyed. It is the recommended way to consume Observables in Angular.

Why Async Pipe matters

Manual subscribe plus ngOnDestroy is the single largest source of memory leaks in Angular applications. The async pipe removes that responsibility entirely.

Async Pipe example

export class JobListComponent {
  private api = inject(JobService);
  jobs$ = this.api.getJobs();   // no subscribe, no ngOnDestroy
}

Subscribe once with as

@if (jobs$ | async; as jobs) {
  @for (job of jobs; track job.id) {
    <app-job-card [job]="job" />
  } @empty {
    <p>No internships found.</p>
  }
} @else {
  <app-spinner />
}

Using the pipe twice in a template creates two subscriptions and two HTTP requests. The as syntax stores the value once and reuses it.

Key points to remember

• Works with Promises as well as Observables.
• It marks the component for check, so it cooperates with OnPush.
• Add shareReplay(1) when several places genuinely need the same stream.

Common mistakes with Async Pipe

• Multiple async pipes on the same Observable, causing duplicate requests.
• Mixing async pipe usage with a manual subscription to the same stream.