Async Pipe

O | async é usado quando o objetivo é apenas ler dados (GET) e mostrá-los na view. Ele automaticamente se inscreve e cancela a inscrição do Observable.

Exemplo

// lista.component.ts
@Component({
  standalone: true,
  imports: [CommonModule],  // Necessário para o '| async'
  // ...
})
export class ListaComponent {
  // '$' depois do nome mostra que é um Observable
  produtos$ = this.produtoService.getProdutos();
 
  constructor(private produtoService: ProdutoService) {}
}

<!-- lista.component.html -->
<ul>
  <li *ngFor="let item of produtos$ | async">
    {{ item.nome }} - {{ item.preco | currency }}
  </li>
</ul>

Acessando Propriedades do Objeto

<div *ngIf="usuario$ | async as user; else loading">
  <h1>Perfil de {{ user.nome }}</h1>
  <p>Email: {{ user.email }}</p>
  <p>Cargo: {{ user.role }}</p>
</div>
 
<ng-template #loading>
  <p>Carregando dados do usuário...</p>
</ng-template>