Articulo

Angular Signals: cómo gestionar el estado en tus componentes

Un Signal representa un valor que puede cambiar y permite que Angular actualice la vista cuando cambia. Puedes empezar con un componente pequeño y separar responsabilidades a medida que la aplicación crece. Junto con componentes standalone y rutas, Signals te ayuda a seguir qué datos necesita cada parte de la app.

Lee y actualiza un signal

Un signal envuelve un valor. Se lee llamándolo como una función y puede actualizarse con set o update. Cuando un template lee ese valor, Angular registra la dependencia y actualiza el componente cuando cambia.

import { signal } from '@angular/core';

const count = signal(0);
count.update(value => value + 1);
console.log(count()); // 1

Deriva valores con computed

Usa computed cuando un valor se obtiene de otros signals. El resultado es de solo lectura y Angular vuelve a calcularlo cuando cambia una dependencia utilizada por la expresión.

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

const count = signal(0);
const doubleCount = computed(() => count() * 2);

Mantén cada estado en el lugar adecuado

Empieza con el estado que necesita el componente y eleva su propiedad cuando varias partes de la interfaz deban compartirlo. Reserva effect para sincronizar signals con APIs imperativas, por ejemplo almacenamiento del navegador o una biblioteca externa; para valores derivados, computed suele ser la opción directa.

Sigue practicando con el curso relacionado.