SIGNALS EN ANGULAR

1. Qué son los signal en Angular

Los signal son una forma de manejar datos reactivos dentro de Angular. Representan valores que pueden cambiar con el tiempo y que notifican automáticamente a los componentes cuando se actualizan.

Un signal funciona como un contenedor de estado. Cuando su valor cambia, Angular actualiza automáticamente las partes de la interfaz que dependen de ese valor.

Ejemplo básico:

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

contador = signal(0);

incrementar() {
  this.contador.update(v => v + 1);
}

Cuando el valor cambia, la vista se actualiza sin necesidad de suscripciones manuales.

2. Diferencias entre signal y observables

Durante muchos años, Angular utilizó principalmente RxJS observables para manejar datos reactivos. Sin embargo, los observables requieren suscripciones y operadores, lo que puede aumentar la complejidad del código.

Los signal ofrecen algunas ventajas:

• No requieren subscribe.

• Actualización automática de la vista.

• Código más simple.

• Menos riesgo de fugas de memoria.

Los observables siguen siendo útiles para flujos de datos complejos o asincrónicos, pero los signal son ideales para estado local de componentes.

3. Tipos de signal en Angular

Angular incluye varios tipos de signal para manejar diferentes escenarios.

Signal básico

contador = signal(0);

Computed signal

Permite crear valores derivados de otros signals.

total = computed(() => this.precio() * this.cantidad());

Effect

Permite ejecutar lógica cuando un signal cambia.

effect(() => {
  console.log(this.contador());
});

Estos tres elementos forman la base del nuevo sistema de reactividad en Angular.

4. Uso de signal en componentes

Los signal se pueden usar directamente en componentes para manejar estado de forma simple.

Ejemplo:

nombre = signal('Cristian');

cambiarNombre() {
  this.nombre.set('Carlos');
}

En la plantilla:

{{ nombre() }}

Angular detecta automáticamente cuándo el valor cambia y actualiza la vista.

5. Buenas prácticas al usar signal

Para aprovechar correctamente los signal en Angular se recomienda:

• Usarlos para estado local del componente.

• Usar computed para valores derivados.

• Evitar lógica compleja dentro de effect.

• Mantener los signals pequeños y específicos.

• Combinar signals con observables cuando sea necesario.

Aplicar estas prácticas ayuda a mantener el código claro y fácil de mantener.

CONCLUSIÓN

Los signal en Angular representan un cambio importante en la forma de manejar la reactividad dentro del framework. Permiten escribir código más simple, reducen la necesidad de suscripciones manuales y facilitan la actualización automática de la interfaz. A medida que Angular evoluciona, los signal se están convirtiendo en una herramienta central para gestionar estado y construir aplicaciones más eficientes.