Angular Signals: Guía práctica para gestionar estado reactivo en Angular

En este artículo aprenderás qué son los Signals, cómo utilizarlos correctamente en componentes Angular y cuándo conviene combinarlos con RxJS.

¿Qué son los Signals en Angular?

Un Signal es un contenedor reactivo ligero que envuelve un valor. Angular detecta automáticamente dónde se consume ese valor y actualiza únicamente las partes necesarias de la interfaz cuando cambia.

• Reactividad síncrona
• Nativos de Angular
• Sin suscripciones manuales
• Reactividad de grano fino

Creación básica de un Signal

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

const contador = signal(0);

// Leer valor
contador();

// Asignar valor
contador.set(5);

// Actualizar valor
contador.update(v => v + 1);

Los signals se leen invocándolos como función, lo que permite a Angular rastrear automáticamente las dependencias.

Uso correcto de Signals en componentes Angular

Componente (TypeScript)

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

@Component({
  selector: 'app-contador',
  templateUrl: './contador.component.html'
})
export class ContadorComponent {

  contador = signal(0);

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

}

Template (HTML)

Valor: {{ contador() }}

<button>
Incrementar
</button>

El template accede al signal llamándolo como función. No se requiere async pipe ni suscripciones manuales.

Computed Signals

Los computed signals permiten definir valores derivados
que se recalculan automáticamente cuando cambian sus dependencias.

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

const precio = signal(100);
const cantidad = signal(2);

const total = computed(() => precio() * cantidad());

Son ideales para lógica derivada sin efectos secundarios.

Effects

Los effects permiten reaccionar a cambios en los signals mediante efectos secundarios como logging o sincronización con servicios externos.

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

effect(() => {
  console.log('El contador cambió:', contador());
});

Buena práctica: no modificar signals dentro de un effect, ya que puede provocar bucles infinitos.

Signals vs RxJS

Buenas prácticas con Signals

• Usar Signals para estado local y de presentación
• Usar computed para lógica derivada
• Usar effect solo para efectos secundarios
• Combinar Signals y RxJS cuando exista asincronía real

Conclusión

Angular Signals no reemplazan RxJS, pero sí ofrecen una alternativa más simple,
legible y eficiente para muchos casos comunes de manejo de estado.

Dominar Signals es clave para desarrollar aplicaciones Angular modernas,
con mejor rendimiento y menor complejidad.

Fuente original:

Angular Signals Cheatsheet – certificates.dev