Async Pipe: Cleaner Observables in Templates

The async pipe is one of the best Angular features. It subscribes for you and cleans up automatically.

Example: products$ with async

Component:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Observable } from 'rxjs';
import { ProductsApi, Product } from './products.api';

@Component({
  selector: 'app-products',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './products.component.html',
})
export class ProductsComponent {
  products$: Observable<Product[]>;

  constructor(api: ProductsApi) {
    this.products$ = api.getProducts();
  }
}

Template:

<ul>
  <li *ngFor="let p of (products$ | async)">
    {{ p.title }} - ${{ p.price }}
  </li>
</ul>

Why it’s better

• no manual subscribe
• no manual unsubscribe
• templates stay readable

Next: Lifecycle hooks, understanding when Angular runs your code.