Angular 21 de Cero a Experto / RxJS y observables a gran escala

Interop signals ↔ observables: toSignal y toObservable

Teoría22 min20 XP

Angular moderno tiene DOS sistemas reactivos: señales (para estado) y Observables (para eventos en el tiempo). No compiten: se complementan, y toSignal/toObservable son el puente entre ellos. Saber cuándo usar cada uno —y cómo conectarlos— es la habilidad que distingue a un desarrollador Angular moderno. Hoy cierras el módulo con la guía definitiva y los dos convertidores.

Dos idiomas, un traductor

toSignal: de Observable a señal

toSignal se suscribe a un Observable y expone su último valor como una señal —gestionando la suscripción y la limpieza por ti—:

tosignal.ts

import { toSignal } from '@angular/core/rxjs-interop';

@Component({ /* ... */ })
export class BuscadorComponent {
private buscador = new FormControl('');

// valueChanges (Observable) → señal reactiva
readonly termino = toSignal(this.buscador.valueChanges, { initialValue: '' });

// ahora 'termino()' es una señal: encaja con computed/effect y el template
readonly esBusquedaValida = computed(() => (this.termino() ?? '').trim().length >= 2);
}

Antes (async pipe) vs Ahora (toSignal)

Antes, para mostrar un Observable en el template usabas el async pipe, que se suscribe y desuscribe por ti pero crea una suscripción POR cada uso en el template, y no se puede leer en la clase sin suscribirse a mano:

antes.ts

// ANTES: async pipe en el template (una suscripción por uso)
// template: {{ (gastos$ | async)?.length }} — {{ (gastos$ | async)?.total }}
gastos$ = this.http.get<Gasto[]>('/api/gastos');

Ahora conviertes el Observable a señal UNA vez con toSignal, y lo lees como cualquier señal —en el template y en la clase, con derivados computed—:

ahora.ts

// AHORA: toSignal una vez, se lee con () en todos lados
gastos = toSignal(this.http.get<Gasto[]>('/api/gastos'), { initialValue: [] });
total = computed(() => this.gastos().reduce((s, g) => s + g.valor, 0));
// template:  {{ gastos().length }} — {{ total() }}

Por qué cambió: toSignal unifica todo en el mundo de señales: una sola conversión, sin múltiples suscripciones del async pipe, legible en la clase, y componible con computed. La limpieza es automática (se desuscribe al destruir el componente). Es el puente preferido para llevar datos de RxJS (HTTP, formularios, router) al resto de tu app basada en señales.

toObservable: de señal a Observable

A veces necesitas lo contrario: tienes una señal (un término de búsqueda en un signal) y quieres aplicarle operadores de RxJS (debounceTime, switchMap). toObservable convierte la señal en un Observable que emite cuando la señal cambia:

toobservable.ts

import { toObservable, toSignal } from '@angular/core/rxjs-interop';

export class BuscadorComponent {
private api = inject(ApiService);
readonly termino = signal('');   // el usuario lo actualiza con termino.set(...)

// señal → Observable, para usar el poder de RxJS en la búsqueda
readonly resultados = toSignal(
  toObservable(this.termino).pipe(
    debounceTime(300),
    distinctUntilChanged(),
    filter((t) => t.trim().length >= 2),
    switchMap((t) => this.api.buscar(t)),
  ),
  { initialValue: [] },
);
}

Este patrón es el mejor de ambos mundos: la ENTRADA es una señal (fácil de actualizar desde el template con termino.set(...)), el PROCESAMIENTO usa RxJS (donde debounceTime+switchMap brillan), y la SALIDA vuelve a ser señal (toSignal) para consumirla en el template. Señal → Observable → señal.

La guía definitiva: ¿señales o RxJS?

Cuándo cada uno

Usa SEÑALES para:

Estado de la app (el total, la lista de gastos, el filtro activo).
Valores derivados (computed).
Todo lo que el template lee y muestra.
La mayoría de tu código: son más simples y el default moderno.

Usa RxJS para:

Eventos en el tiempo con lógica temporal: debounceTime, throttleTime.
Aplanar operaciones asíncronas dependientes: switchMap, concatMap.
Combinar múltiples streams asíncronos con timing complejo.
WebSockets y streams de larga vida (tiempo real).
Reintentos y manejo de errores en cadenas asíncronas.

Regla práctica: empieza con señales. Cuando necesites LÓGICA TEMPORAL o aplanar asincronía (búsqueda con debounce, autocompletado, tiempo real), baja a RxJS para esa parte con toObservable, y vuelve a señal con toSignal para el resto. No es "uno u otro": es cada uno en su terreno, conectados por los dos convertidores.

Tienes un término de búsqueda en un `signal` y quieres aplicarle `debounceTime` + `switchMap`. ¿Cómo lo conectas?

Mini-reto

Diseña el flujo de un autocompletar de categorías de "Mi Bolsillo": 1) una señal texto que el input actualiza; 2) conviértela a Observable con toObservable y aplícale debounceTime(250), distinctUntilChanged y switchMap a una búsqueda; 3) vuelve el resultado a señal con toSignal (initialValue []). Escribe el esqueleto y marca en qué punto vive cada sistema (señal / RxJS / señal).

Qué sigue

Cierras la teoría de RxJS con la habilidad más valiosa: usar señales y Observables juntos, cada uno en su terreno. El reto del módulo lo corona: vas a construir un BUSCADOR reactivo completo desde cero —con debounce, cancelación de peticiones obsoletas y manejo de errores—, el patrón que resume todo RxJS y que usarás en cualquier app profesional.