Observables: streams de valores en el tiempo

Las señales resuelven el estado; RxJS resuelve los EVENTOS en el tiempo: clics, pulsaciones de teclado, respuestas del servidor que llegan una tras otra, WebSockets. Un Observable es un "stream" —una secuencia de valores que llegan a lo largo del tiempo— y RxJS es el lenguaje para transformarlos y combinarlos. Ya viste la idea en el SC-02 (el store observable); hoy la formalizas con RxJS y construyes tu propio Observable desde cero.

El grifo, no el vaso

Observable vs Promise vs señal

Suscribirse a un Observable

Un Observable no hace nada hasta que te SUSCRIBES. Al suscribirte, le das tres manejadores: next (llegó un valor), error (algo falló, termina), complete (terminó sin error):

import { interval } from 'rxjs';

// 'interval' emite 0, 1, 2, 3… cada 1000ms
const sub = interval(1000).subscribe({
next: (n) => console.log('tick', n),   // se llama en cada emisión
error: (e) => console.error(e),        // si falla
complete: () => console.log('fin'),    // si termina
});

// cuando ya no lo necesitas, te DESUSCRIBES (cierras el grifo)
sub.unsubscribe();

La suscripción devuelve un objeto con .unsubscribe(): cerrar el grifo es tu responsabilidad, o tendrás fugas (un interval que sigue corriendo tras destruir el componente). En Angular, el async pipe y toSignal gestionan esto por ti —una de las razones para preferirlos sobre subscribe manual—.

De dónde vienen los Observables

Casi todo lo asíncrono en Angular es un Observable:

this.http.get<Gasto[]>('/api/gastos');    // HttpClient → Observable de la respuesta
this.form.valueChanges;                    // cambios del formulario → Observable
this.route.paramMap;                        // parámetros de la URL → Observable
fromEvent(boton, 'click');                  // eventos del DOM → Observable
// y creas los tuyos con of(...), from(...), interval(...), new Observable(...)

Construye tu propio Observable

Un Observable no es magia: es una función que, cuando alguien se suscribe, empieza a EMPUJAR valores al suscriptor. Aquí está la esencia —un mini-Observable con subscribe, unsubscribe, next y complete— en vivo:

Fíjate en dos cosas: (1) el productor solo arranca al subscribe —los Observables son PEREZOSOS, a diferencia de una Promise que corre al crearse—; (2) unsubscribe llama a la función de limpieza (clearInterval), cerrando el grifo. Ese es el contrato de RxJS: te suscribes para recibir, te desuscribes para parar. Todo lo demás —operadores, combinaciones— se construye encima de esto.

Mini-reto

En el playground, amplía tu mini-RxJS: 1) una función deRango(inicio, fin) que emita los números de inicio a fin y complete; 2) suscríbete e imprime cada valor; 3) crea un cadaTick que se cancele SOLO tras 5 emisiones (lleva la cuenta en el next y llama unsubscribe). Confirma que sin subscribe no se imprime nada (pereza).

Qué sigue

Tienes el ladrillo: un stream al que te suscribes. Pero el poder de RxJS está en TRANSFORMAR ese stream antes de consumirlo: mapear, filtrar, esperar a que el usuario deje de escribir. La próxima lección son los operadores y el pipe —la tubería que transforma un grifo en otro—.