Angular Academy · Lección

El pipe async

Suscríbase en las plantillas sin realizar una limpieza manual.

El pipe async es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

Qué hace el pipe async

El pipe async se suscribe a un Observable (o Promise) en la plantilla, muestra el último valor emitido y cancela automáticamente la suscripción cuando se destruye el componente.

Uso básico

Vincule un observable directamente en la plantilla y páselo por el pipe async.

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

Representar objetos con async

Funciona con cualquier tipo de valor emitido. Combínelo con otros pipes, como json o date.

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

Evitar varias suscripciones

Cada uso de async crea una suscripción. Utilizarlo muchas veces con el mismo observable provoca varias llamadas HTTP. Use la sintaxis as para suscribirse una sola vez.

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

Con el nuevo flujo de control

En las versiones modernas de Angular, utilice @if con as para aplicar el mismo patrón de una única suscripción.

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

Valor null mientras está pendiente

Antes de la primera emisión, async devuelve null. Gestione explícitamente el estado de carga.

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

No es necesario cancelar la suscripción manualmente

El pipe cancela automáticamente la suscripción al destruirse el componente, lo que elimina toda una categoría de fugas de memoria. Por eso es la forma preferida de consumir observables en las plantillas.

Cambiar de observable

Si cambia la referencia del observable vinculado, el pipe async cancela automáticamente la suscripción al anterior y se suscribe al nuevo.

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

Pipe async con BehaviorSubject

Combinar un servicio con BehaviorSubject y el pipe async proporciona una UI reactiva y clara, sin código de suscripción manual.

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

Pipe async frente a toSignal

Ambos gestionan las suscripciones automáticamente. El pipe async vive en la plantilla; toSignal() lleva el valor al código del componente como una señal. Elija según dónde necesite el valor.

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

Resumen de buenas prácticas

Prefiera el pipe async (o toSignal) a las suscripciones manuales en los componentes. Utilice as para evitar suscripciones duplicadas y gestione siempre el estado inicial de null/carga.

Comprobación rápida

Compruebe lo que ha aprendido sobre el pipe async.

Resumen: El pipe Async

El pipe async se suscribe en la plantilla y limpia sus recursos al destruirse el componente.

Utilice as (con @if o *ngIf) para suscribirse una sola vez.
Devuelve null antes de la primera emisión; gestione el estado de carga.
Es preferible a las suscripciones manuales en las plantillas.

Ha completado los fundamentos de RxJS.

Preguntas frecuentes

¿La lección «El pipe async» es gratis?

Sí — el texto completo de «El pipe async» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «El pipe async»?

Suscríbase en las plantillas sin realizar una limpieza manual. Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Angular Academy?

No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «El pipe async»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Angular Academy?

Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Angular Academy