Angular Signals: guía práctica para migrar tu app

Qué son los Signals?

Los Signals son una nueva primitiva reactiva en Angular que permite manejar estado de forma granular y eficiente. Son funciones que contienen un valor y notifican a los consumidores cuando ese valor cambia.

Signal vs Observable

A diferencia de los Observables de RxJS, los Signals son sincronos, más simples de usar y se integran directamente con el sistema de detección de cambios de Angular.

Creando Signals

Crear un signal es tan simple como llamar a la función signal() con un valor inicial. Para leer el valor, llamas al signal como una función. Para escribir, usas .set() o .update().

Computed signals

Los computed() signals derivan su valor de otros signals. Se recalculan automaticamente cuando sus dependencias cambian, y son siempre de solo lectura.

Effects

Los effect() ejecutan código como efecto secundario cuando los signals que leen cambian. Son útiles para logging, sincronizar con APIs externas o localStorage.

Migracion paso a paso

Migrar una app existente a Signals es un proceso gradual. Puedes empezar convirtiendo propiedades de componentes a signals, luego usar computed para estado derivado, y finalmente reemplazar Subjects simples.

Mejores prácticas

Usa signals para estado local del componente, computed para estado derivado, y mantiene las transformaciones de estado puras y predecibles. Evita usar mutate() y prefiere update() o set().

Ejemplos de código

TypeScript

import { Component, signal, computed } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <p>Contador: {{ count() }}</p>
    <p>Doble: {{ double() }}</p>
    <button (click)="increment()">+1</button>
  `,
})
export class CounterComponent {
  count = signal(0);
  double = computed(() => this.count() * 2);

  increment() {
    this.count.update(c => c + 1);
  }
}