Signals: reactividad de grano fino

signal(valorInicial) crea un signal escribible. Lo lees llamándolo como una función, cantidad(), y lo cambias con set(nuevoValor), o con update(anterior => nuevo) cuando el valor nuevo depende del anterior.

Al leer un signal dentro de una plantilla, un computed() o un effect(), Angular registra esa dependencia. Cuando el valor cambia, avisa exactamente a quienes lo leyeron, sin revisar el resto de la aplicación.

Por defecto, un signal compara el valor nuevo con el anterior usando Object.is: si pones el mismo valor, no avisa a nadie.

computed(() => …) crea un signal cuyo valor se deriva de otros signals. Angular detecta qué signals lees dentro de la función y solo recalcula cuando alguno de ellos cambia.

Es perezoso y memoriza el resultado: no calcula nada hasta que alguien lo lee y, si sus dependencias no han cambiado, devuelve el valor guardado sin repetir el cálculo. Por eso puedes filtrar una lista larga dentro de un computed sin miedo.

Las dependencias son dinámicas: si un if impide leer un signal, ese signal deja de ser dependencia hasta que se vuelva a leer.

effect(() => …) ejecuta una función al menos una vez y la repite cada vez que cambia alguno de los signals que lee. Su trabajo es conectar el mundo de los signals con lo que queda fuera de él: guardar en localStorage, escribir un registro, dibujar en un <canvas> o actualizar una librería de gráficos que no conoce Angular.

Los efectos se ejecutan de forma asíncrona, durante la detección de cambios, no en el mismo instante del set. Necesitan un contexto de inyección, así que se crean en el constructor o al declarar un campo, y se destruyen solos junto con el componente.

En el Angular moderno, una entrada se declara con input() en lugar del decorador @Input(). El resultado es un signal de solo lectura: lo lees con nombre() en la clase o en la plantilla, y puedes derivar valores de él con computed.

input(valorPorDefecto) crea una entrada opcional, e input.required<T>(), una obligatoria: si el padre no la pasa, el compilador da error. Con la opción transform conviertes el valor al recibirlo; por ejemplo, con booleanAttribute basta con escribir <app-avatar redondo>.

model() crea un signal escribible que funciona como entrada y salida a la vez. El componente lo lee y lo cambia con set o update, y Angular emite automáticamente el evento de cambio (valorChange) para que el padre se entere.

El padre lo enlaza en ambos sentidos con la sintaxis de «banana en una caja», [(valor)]. Si le pasa un signal escribible, sin paréntesis, padre e hijo comparten el valor sin código adicional.

A veces un valor se deriva de otro, pero el usuario también puede cambiarlo. Por ejemplo, la opción de envío empieza siendo la primera de la lista, el usuario puede elegir otra y, si la lista cambia, la selección debe volver a una opción válida. Un computed no se puede editar y un signal no se reinicia solo.

linkedSignal(() => …) cubre ese hueco: se calcula como un computed, admite set y update como un signal y vuelve a calcularse cuando cambia lo que lee. Con la forma { source, computation } recibes también el valor anterior, por si quieres conservar la selección cuando sigue siendo válida.

resource() conecta los signals con operaciones asíncronas. Le das una función params que lee signals y un loader que devuelve una promesa; cada vez que los parámetros cambian, vuelve a cargar y cancela la carga anterior mediante un AbortSignal.

El resultado expone signals para todo lo que necesita la plantilla: value(), isLoading(), error() y hasValue(), además de reload() para repetir la carga. Para peticiones HTTP existe también httpResource, que usa HttpClient por debajo.

Un signal siempre tiene un valor y se lee de forma síncrona: es ideal para el estado que muestra la interfaz. Un observable de RxJS es un flujo de eventos en el tiempo: puede no haber emitido nada aún, emitir muchas veces, terminar o fallar, y tiene operadores para esperar, cancelar o combinar, como verás en la siguiente lección.

El paquete @angular/core/rxjs-interop trae los puentes: toSignal(obs$) se suscribe a un observable y expone su último valor como signal, y se desuscribe solo cuando se destruye el componente; toObservable(signal) convierte un signal en observable para encadenarle operadores como debounceTime o switchMap.