Pipe async

<< Observables (rxjs) signals + rxjs >>

En lugar de suscribirnos al observable que devuelve el servicio podemos hacer que Angular se suscriba automáticamente con el pipe async. Para ello, guardamos el objeto de tipo Observable en una propiedad del componente (por convenio, las variables y propiedades que referencian observables acaban en $), y lo usamos en la plantilla con el pipe async. Este pipe también funciona con promesas.

La utilización de este pipe es opcional y está recomendado en los siguientes casos:

Tenemos un observable que emite varios valores a lo largo del tiempo y queremos que Angular se suscriba en la plantilla para actualizar esos valores automáticamente.
Tenemos un observable tipo llamada http que solo lo vamos a llamar una vez (por ejemplo en el constructor) y ya no se va a necesitar volver a llamarlo durante la vida del componente.

Si queremos pasar de señales a observables nuestro ejemplo y utilizar el pipe async, la cosa se complica un poco, o por lo menos exige algo de conocimiento de la librería RxJS. En concreto, vamos a utilizar la clase BehaviorSubject, que es un observable (hot) que puede emitir múltiples valores, y cada suscripción no genera una reejecución del mismo, sino que emite el último valor almacenado, quedando a la espera de nuevos valores.

Creamos el observable products$, que contendrá la última versión del array de productos. A continuación, creamos el observable filteredProducts$, que será una combinación de products$ con el texto de búsqueda search (la convertimos de señal a observable). Este observable toma los 2 últimos valores de ambos (combineLatest) y devuelve el array de productos filtrados.

En la plantilla nos suscribimos al observable filteredProducts$ con el pipe async y utilizamos siempre su último valor. Cualquier cambio detectado con el pipe async es notificado automáticamente a Angular para que compruebe cambios en su plantilla, igual que los cambios de valor en señales vinculadas.

Este ejemplo en concreto es más simple con señales. Sin embargo hay casos de uso donde la utilización de referencias a observables y el pipe async son bastante útiles. Seguiremos el curso manteniendo el código anterior frente a este, que se puede ver a continuación.

@let filteredProducts = filteredProducts$ | async;
@if (filteredProducts?.length) {
  <!-- ... -->
  @for (product of filteredProducts; track product.id) {
    <product-item [product]="product" [showImage]="showImage()" (deleted)="deleteProduct(product)" class="row g-0" />
  }
} @else {
  <h3 class="p-4">No hay productos disponibles</h3>
}

No es necesario cancelar la suscripción a observables con el pipe async. Angular lo hace automáticamente si el componente es destruido.

<< Observables (rxjs) signals + rxjs >>