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: ```ts 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: ```html <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.