Angular Academy · Aula

O pipe async

Assine em modelos sem fazer a limpeza manualmente.

O pipe async é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

O que o pipe async faz

O pipe async faz a inscrição em um Observable (ou Promise) no modelo, exibe o valor emitido mais recentemente e cancela a inscrição automaticamente quando o componente é destruído.

Uso básico

Vincule um observável diretamente no modelo e passe-o pelo pipe async.

@Component({
  template: '<p>{{ message$ | async }}</p>'
})
export class HelloComponent {
  message$ = of('Hello from RxJS');
}

Renderizando objetos com async

Ele funciona com qualquer tipo emitido. Combine-o com outros pipes, como json ou date.

user$ = this.http.get('/api/me');
// template:
// <pre>{{ user$ | async | json }}</pre>

Evite várias inscrições

Cada uso de async cria uma inscrição. Usá-lo muitas vezes no mesmo observável dispara várias chamadas HTTP. Use a sintaxe as para fazer a inscrição uma única vez.

<!-- one subscription, reused as "user" -->
<div *ngIf="user$ | async as user">
  <p>{{ user.name }}</p>
  <p>{{ user.email }}</p>
</div>

Com o novo fluxo de controle

No Angular moderno, use @if com as para aplicar o mesmo padrão de inscrição única.

@if (user$ | async; as user) {
  <p>{{ user.name }}</p>
  <p>{{ user.email }}</p>
}

Null enquanto aguarda

Antes da primeira emissão, async produz null. Trate explicitamente o estado de carregamento.

@if (data$ | async; as data) {
  <list [items]="data" />
} @else {
  <p>Loading...</p>
}

Não é necessário cancelar a inscrição manualmente

O pipe cancela a inscrição automaticamente durante a destruição, eliminando toda uma classe de vazamentos de memória. Por isso, ele é a forma preferida de consumir observáveis nos modelos.

Trocando de observáveis

Se a referência do observável vinculado mudar, o pipe async cancela automaticamente a inscrição no observável antigo e se inscreve no novo.

search(term: string) {
  this.results$ = this.http.get('/api/search?q=' + term);
  // async pipe swaps subscriptions for you
}

Pipe async com BehaviorSubject

Combinar um serviço com BehaviorSubject e o pipe async fornece uma interface reativa organizada, sem código manual de inscrição.

// service: readonly count$ = this.subject.asObservable();
// template: <span>{{ count$ | async }}</span>

Pipe async versus toSignal

Ambos gerenciam as inscrições automaticamente. O pipe async fica no modelo; toSignal() traz o valor para o código do componente como um sinal. Escolha com base no local em que você precisa do valor.

import { toSignal } from '@angular/core/rxjs-interop';
user = toSignal(this.http.get('/api/me'));
// template: {{ user()?.name }}

Resumo das práticas recomendadas

Prefira o pipe async (ou toSignal) à inscrição manual nos componentes. Use as para evitar inscrições duplicadas e sempre trate o estado inicial nulo/de carregamento.

Verificação rápida

Teste sua compreensão sobre o pipe async.

Recapitulação: o pipe async

O pipe async faz a inscrição no modelo e limpa os recursos durante a destruição.

Use as (com @if ou *ngIf) para fazer a inscrição uma única vez.
Ele produz null antes da primeira emissão — trate o carregamento.
É preferível às inscrições manuais nos modelos.

Você concluiu os fundamentos de RxJS.

Perguntas Frequentes

A aula “O pipe async” é grátis?

Sim — o texto completo de “O pipe async” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “O pipe async”?

Assine em modelos sem fazer a limpeza manualmente. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “O pipe async”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Angular Academy