Angular Signals y Effects

Angular ha cambiado la forma en que maneja la reactividad. Ya no necesitas Zone.js para detectar cada pequeño cambio. Los Signals permiten que Angular actualice solo las partes específicas de la interfaz de usuario (UI) que cambian. Esto hace que tus aplicaciones sean más rápidas y permite el modo zoneless.

¿Qué son los Signals?

Un signal es un contenedor para un valor reactivo. Cuando el valor cambia, Angular sabe exactamente qué partes de la plantilla debe actualizar.

  • signal(): Crea un nuevo signal. Usa .set() para reemplazar un valor o .update() para cambiar un valor basándose en el actual.
  • computed(): Crea un signal de solo lectura. Deriva su valor de otros signals. Angular calcula esto solo cuando lo lees y almacena el resultado en caché.
  • effect(): Ejecuta código cuando un signal cambia. Úsalo para efectos secundarios como el registro (logging) o cambios manuales en el DOM.

Cuándo usar Signals frente a RxJS

No necesitas elegir uno. Debes usar ambos para tareas diferentes.

Usa Signals para:

  • Mantener el estado de la UI.
  • Impulsar el renderizado de plantillas.
  • Reemplazar @Input() y @Output().
  • Trabajar en aplicaciones zoneless.

Usa RxJS para:

  • Manejar flujos asíncronos como HTTP o WebSockets.
  • Lógica compleja como debouncing o el cambio de flujos (switching streams).
  • Combinar múltiples secuencias de eventos.

Puedes conectarlos usando rxjs-interop:

  • toSignal(): Convierte un Observable en un Signal.
  • toObservable(): Convierte un Signal en un Observable.

Nuevas APIs sin decoradores

Angular 17+ introdujo nuevas formas de manejar el flujo de datos sin utilizar decoradores.

  • input(): Un signal de solo lectura para datos que provienen de un componente padre.
  • model(): Un signal escribible para el enlace bidireccional (two-way binding). Reemplaza el antiguo patrón @Input() y @Output().
  • output(): Una forma de emitir eventos de un hijo a un padre. No es un signal, pero simplifica tu código.

Por qué esto es mejor que React

Si conoces React, los conceptos son similares pero la ejecución es diferente.

  • Seguimiento automático: En React, debes listar las dependencias en un array. En Angular, el sistema rastrea automáticamente qué signals utilizas. No puedes olvidar una dependencia.
  • Actualizaciones de precisión: React a menudo vuelve a renderizar componentes enteros. Los signals de Angular actualizan solo los nodos del DOM específicos que dependen del valor.
  • Sin cierres obsoletos (stale closures): Los signals siempre proporcionan el valor actual cuando los llamas.

Fuente: https://dev.to/atilla_baspinar_c5c68ec63/angular-signals-and-effects-35mn