Signals

Los signals son la primitiva reactiva de Angular: un signal guarda un valor, registra dónde se lee y avisa a esos lectores cuando el valor cambia.

Un signal es un envoltorio alrededor de un valor. Se lee llamándolo como función, y se cambia con set o update. Cuando un template u otro código reactivo lee un signal, Angular registra esa dependencia. Cuando el valor cambia, Angular sabe qué componentes necesitan actualizarse.

Hay tres piezas básicas:

• signal() crea un valor que se puede escribir.
• computed() deriva un valor de otros signals y se recalcula solo cuando estos cambian.
• effect() ejecuta un efecto secundario cuando cambian los signals que lee.

Ejemplo

export class CartComponent {
  items = signal<Item[]>([]);
  total = computed(() =>
    this.items().reduce((sum, item) => sum + item.price, 0));

  add(item: Item) {
    this.items.update(list => [...list, item]);
  }
}

El template lee total(). Cuando se ejecuta add, el total se recalcula y la vista se actualiza. No hay ninguna suscripción que administrar.

Confusión frecuente

A menudo se describe a los signals como el reemplazo de RxJS. Cubren terrenos distintos. Un signal siempre tiene un valor actual y sirve para el estado que la vista muestra. Un observable modela eventos en el tiempo, como respuestas HTTP, mensajes de WebSocket o entradas del usuario que necesitan debounce. La mayoría de las aplicaciones usa ambos, y toSignal y toObservable convierten entre uno y otro.

Un segundo error es usar effect() para copiar un signal en otro. Ese trabajo le corresponde a computed(). Los effects están pensados para tareas fuera del grafo reactivo, como registrar logs o escribir en local storage.

Para quienes vienen de AngularJS, los signals reemplazan el modelo mental de $scope y $watch por dependencias explícitas. La referencia de AngularJS a Angular muestra las equivalencias.

Términos relacionados

• Detección de cambios
• Detección de cambios zoneless
• Componentes standalone