Guía de Angular Signals que Transformará tu Programación Reactiva
Finalmente, un primitivo reactivo que hace la gestión de estado intuitiva y performante sin la complejidad de RxJS
Equipe Blueprintblog12 min
¡Hola, developers! 👋
¿Recuerdas la última vez que debugueaste una cadena compleja de RxJS con múltiples suscripciones, async pipes por todos lados, y ese memory leak que no podías rastrear? ¿O cuando tuviste que explicarle a un desarrollador junior por qué necesita hacer unsubscribe de los observables??
Hoy, quiero compartir Angular Signals - un nuevo primitivo reactivo que cambia fundamentalmente cómo manejamos el estado en aplicaciones Angular. Al final de este artículo, entenderás cómo aprovechar signals para tener programación reactiva más limpia y performante sin la sobrecarga tradicional de RxJS.
¿Qué son los Angular Signals?
Piensa en signals como "variables inteligentes" que automáticamente rastrean cuándo son leídas y notifican cuando cambian. Son como un rastreador GPS para tus datos - siempre sabiendo quién está observando y actualizando eficientemente solo lo que necesita cambiar.
Angular Signals resuelven el problema fundamental de la reactividad granular: saber exactamente qué cambió y actualizar solo las partes afectadas de tu UI, sin gestión manual de suscripciones o preocupaciones con change detection.
¿Cuándo Deberías Usar Angular Signals?
Buenos casos de uso:
- Gestión de estado de componentes que necesita actualizaciones reactivas
- Valores computados derivados de otras fuentes reactivas
- Estado y lógica de validación de formularios
- Estado compartido entre componentes sin servicios
- Actualizaciones de UI críticas para performance con change detection mínimo
Cuándo NO usar Signals:
- Peticiones HTTP y operaciones asíncronas (continúa con Observables)
- Streams de eventos complejos que necesitan operators como debounce, throttle
- Integración con codebases pesadas en RxJS (usa interop con cuidado)
Signals: Tu Primera Implementación
Construyamos un ejemplo práctico: un contador de productos con cálculo de precio en tiempo real que demuestra los conceptos principales de signals.
Paso 1: Creando Tu Primer Signal
typescript
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-producto',
template: `
<div>
<h2>Producto: {{ nombreProducto() }}</h2>
<p>Cantidad: {{ cantidad() }}</p>
<button (click)="incrementar()">Agregar al Carrito</button>
</div>
`
})
export class ProductoComponent {
// Creando signals escribibles
nombreProducto = signal('Libro Angular');
cantidad = signal(0);
incrementar() {
// Actualizando valor del signal
this.cantidad.set(this.cantidad() + 1);
}
}Este código crea dos signals - nota cómo los llamamos como funciones en el template. Los signals son funciones que retornan su valor actual cuando son llamadas.
Paso 2: Trabajando con Computed Signals
typescript
import { Component, signal, computed } from '@angular/core';
@Component({
selector: 'app-producto',
template: `
<div>
<p>Cantidad: {{ cantidad() }}</p>
<p>Precio unitario: ${{ precioUnitario() }}</p>
<p>Total: ${{ precioTotal() }}</p>
<button (click)="incrementar()">Agregar Item</button>
</div>
`
})
export class ProductoComponent {
cantidad = signal(1);
precioUnitario = signal(29.99);
// Computed signal actualiza automáticamente cuando las dependencias cambian
precioTotal = computed(() => {
return this.cantidad() * this.precioUnitario();
});
incrementar() {
this.cantidad.update(c => c + 1);
}
}Los computed signals recalculan automáticamente cuando sus dependencias cambian. Sin suscripciones, sin actualizaciones manuales - simplemente funciona.
Paso 3: Signal Effects para Side Effects
typescript
import { Component, signal, computed, effect } from '@angular/core';
@Component({
selector: 'app-producto'
})
export class ProductoComponent {
cantidad = signal(0);
inventario = signal(10);
constructor() {
// Effect ejecuta cuando los signals que lee cambian
effect(() => {
if (this.cantidad() > this.inventario()) {
console.log('¡Advertencia: La cantidad excede el inventario!');
this.mostrarAdvertenciaInventario = true;
}
});
}
agregarAlCarrito() {
if (this.cantidad() < this.inventario()) {
this.cantidad.update(c => c + 1);
}
}
}Los effects rastrean automáticamente las dependencias de signals y se re-ejecutan cuando esos signals cambian - perfecto para logging, analytics, o manipulaciones del DOM.
Un Ejemplo Más Complejo: Carrito de Compras con Filtros
Construyamos algo más realista - un carrito de compras con filtrado y cálculos en tiempo real:
typescript
import { Component, signal, computed } from '@angular/core';
interface Producto {
id: number;
nombre: string;
precio: number;
categoria: string;
enStock: boolean;
}
@Component({
selector: 'app-carrito-compras',
template: `
<div class="carrito">
<input
placeholder="Buscar productos..."
(input)="terminoBusqueda.set($event.target.value)"
/>
<select (change)="categoriaSeleccionada.set($event.target.value)">
<option value="todas">Todas las Categorías</option>
<option *ngFor="let cat of categorias()" [value]="cat">
{{ cat }}
</option>
</select>
<div class="productos">
<div *ngFor="let producto of productosFiltrados()">
<h3>{{ producto.nombre }}</h3>
<p>${{ producto.precio }}</p>
<button
(click)="agregarAlCarrito(producto)"
[disabled]="!producto.enStock"
>
Agregar al Carrito
</button>
</div>
</div>
<div class="resumen">
<p>Items en el carrito: {{ itemsCarrito().length }}</p>
<p>Total: ${{ totalCarrito() }}</p>
<p>Con impuesto (10%): ${{ totalConImpuesto() }}</p>
</div>
</div>
`
})
export class CarritoComprasComponent {
// Signals de estado
productos = signal<Producto[]>([
{ id: 1, nombre: 'Portátil', precio: 999, categoria: 'Electrónica', enStock: true },
{ id: 2, nombre: 'Ratón', precio: 29, categoria: 'Electrónica', enStock: true },
{ id: 3, nombre: 'Escritorio', precio: 299, categoria: 'Muebles', enStock: false },
{ id: 4, nombre: 'Silla', precio: 199, categoria: 'Muebles', enStock: true }
]);
itemsCarrito = signal<Producto[]>([]);
terminoBusqueda = signal('');
categoriaSeleccionada = signal('todas');
// Computed signals para estado derivado
categorias = computed(() => {
const cats = new Set(this.productos().map(p => p.categoria));
return Array.from(cats);
});
productosFiltrados = computed(() => {
const termino = this.terminoBusqueda().toLowerCase();
const categoria = this.categoriaSeleccionada();
return this.productos().filter(producto => {
const coincideBusqueda = producto.nombre.toLowerCase().includes(termino);
const coincideCategoria = categoria === 'todas' || producto.categoria === categoria;
return coincideBusqueda && coincideCategoria;
});
});
totalCarrito = computed(() => {
return this.itemsCarrito().reduce((suma, item) => suma + item.precio, 0);
});
totalConImpuesto = computed(() => {
return this.totalCarrito() * 1.1; // 10% impuesto
});
agregarAlCarrito(producto: Producto) {
this.itemsCarrito.update(items => [...items, producto]);
}
}Este ejemplo muestra cómo los signals manejan elegantemente relaciones reactivas complejas sin gestión manual de suscripciones.
Patrón Avanzado: Validación de Formulario Basada en Signals
Construyamos algo aún más sofisticado - un formulario reactivo con validación en tiempo real usando signals:
typescript
import { Component, signal, computed, effect } from '@angular/core';
interface ErroresFormulario {
email?: string;
contrasena?: string;
confirmarContrasena?: string;
}
@Component({
selector: 'app-formulario-registro',
template: `
<form (submit)="enviarFormulario($event)">
<div>
<input
type="email"
placeholder="Email"
[value]="email()"
(input)="email.set($event.target.value)"
[class.error]="errores().email"
/>
<span class="msg-error">{{ errores().email }}</span>
</div>
<div>
<input
type="password"
placeholder="Contraseña"
[value]="contrasena()"
(input)="contrasena.set($event.target.value)"
[class.error]="errores().contrasena"
/>
<span class="msg-error">{{ errores().contrasena }}</span>
</div>
<div>
<input
type="password"
placeholder="Confirmar Contraseña"
[value]="confirmarContrasena()"
(input)="confirmarContrasena.set($event.target.value)"
[class.error]="errores().confirmarContrasena"
/>
<span class="msg-error">{{ errores().confirmarContrasena }}</span>
</div>
<button [disabled]="!formularioValido()">
Registrarse
</button>
<div class="medidor-fuerza">
Fuerza de la Contraseña: {{ fuerzaContrasena() }}
</div>
</form>
`
})
export class FormularioRegistroComponent {
// Signals de campos del formulario
email = signal('');
contrasena = signal('');
confirmarContrasena = signal('');
camposTocados = signal<Set<string>>(new Set());
// Reglas de validación como computed signals
errores = computed<ErroresFormulario>(() => {
const errores: ErroresFormulario = {};
const tocados = this.camposTocados();
// Validación de email
if (tocados.has('email')) {
const valorEmail = this.email();
if (!valorEmail) {
errores.email = 'El email es obligatorio';
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(valorEmail)) {
errores.email = 'Formato de email inválido';
}
}
// Validación de contraseña
if (tocados.has('contrasena')) {
const pwd = this.contrasena();
if (!pwd) {
errores.contrasena = 'La contraseña es obligatoria';
} else if (pwd.length < 8) {
errores.contrasena = 'La contraseña debe tener al menos 8 caracteres';
}
}
// Validación de confirmación de contraseña
if (tocados.has('confirmarContrasena')) {
if (this.contrasena() !== this.confirmarContrasena()) {
errores.confirmarContrasena = 'Las contraseñas no coinciden';
}
}
return errores;
});
fuerzaContrasena = computed(() => {
const pwd = this.contrasena();
if (pwd.length < 6) return 'Débil';
if (pwd.length < 10) return 'Media';
if (/[A-Z]/.test(pwd) && /[0-9]/.test(pwd) && /[^A-Za-z0-9]/.test(pwd)) {
return 'Fuerte';
}
return 'Media';
});
formularioValido = computed(() => {
return this.email() &&
this.contrasena() &&
this.confirmarContrasena() &&
Object.keys(this.errores()).length === 0;
});
constructor() {
// Auto-guardar borrador en localStorage
effect(() => {
const borrador = {
email: this.email(),
timestamp: Date.now()
};
localStorage.setItem('borradorRegistro', JSON.stringify(borrador));
});
}
marcarComoTocado(campo: string) {
this.camposTocados.update(campos => {
campos.add(campo);
return new Set(campos);
});
}
enviarFormulario(event: Event) {
event.preventDefault();
if (this.formularioValido()) {
console.log('Formulario enviado:', {
email: this.email(),
contrasena: this.contrasena()
});
}
}
}Esto demuestra cómo los signals pueden reemplazar librerías de formularios complejas con lógica de validación simple y reactiva.
Angular Signals con TypeScript
Para usuarios de TypeScript, aquí está cómo hacer tus implementaciones de signal type-safe:
javascript
// tipos.ts
interface Usuario {
id: number;
nombre: string;
email: string;
rol: 'admin' | 'usuario' | 'invitado';
}
interface EstadoApp {
usuarioActual: Usuario | null;
estaAutenticado: boolean;
permisos: string[];
}
// signal-store.service.ts
import { Injectable, signal, computed, Signal } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class SignalStore {
// Signals escribibles con tipos explícitos
private _usuarioActual = signal<Usuario | null>(null);
private _estaCargando = signal<boolean>(false);
// Computed signals de solo lectura
readonly usuarioActual: Signal<Usuario | null> = this._usuarioActual.asReadonly();
readonly estaAutenticado = computed<boolean>(() => !!this._usuarioActual());
readonly permisos = computed<string[]>(() => {
const usuario = this._usuarioActual();
if (!usuario) return [];
switch(usuario.rol) {
case 'admin': return ['leer', 'escribir', 'eliminar', 'admin'];
case 'usuario': return ['leer', 'escribir'];
case 'invitado': return ['leer'];
}
});
// Métodos de actualización type-safe
login(usuario: Usuario): void {
this._usuarioActual.set(usuario);
}
actualizarUsuario(actualizaciones: Partial<Usuario>): void {
this._usuarioActual.update(actual =>
actual ? { ...actual, ...actualizaciones } : null
);
}
}
// Uso con TypeScript
@Component({
selector: 'app-perfil',
template: `
<div *ngIf="store.usuarioActual() as usuario">
<h2>{{ usuario.nombre }}</h2>
<p>Rol: {{ usuario.rol }}</p>
<ul>
<li *ngFor="let perm of store.permisos()">
{{ perm }}
</li>
</ul>
</div>
`
})
export class PerfilComponent {
constructor(public store: SignalStore) {}
}Patrones Avanzados y Mejores Prácticas
1. Patrón de Composición de Signals
Crea signals de orden superior que combinan múltiples fuentes de signals:
javascript
// Componer múltiples signals en un único estado reactivo
function crearListaPaginada<T>(items: Signal<T[]>, tamañoPagina: number) {
const paginaActual = signal(0);
const totalPaginas = computed(() =>
Math.ceil(items().length / tamañoPagina)
);
const itemsPaginados = computed(() => {
const inicio = paginaActual() * tamañoPagina;
return items().slice(inicio, inicio + tamañoPagina);
});
return {
items: itemsPaginados,
paginaActual: paginaActual.asReadonly(),
totalPaginas,
siguientePagina: () => paginaActual.update(p => Math.min(p + 1, totalPaginas() - 1)),
paginaAnterior: () => paginaActual.update(p => Math.max(p - 1, 0))
};
}2. Patrón de Memoización de Signals
Optimiza cálculos costosos con signals memoizados:
javascript
// Memoizar operaciones costosas
function crearSignalMemoizado<T, R>(
fuente: Signal<T>,
calcular: (valor: T) => R,
igualdad?: (a: R, b: R) => boolean
) {
let ultimaEntrada: T | undefined;
let ultimaSalida: R | undefined;
return computed(() => {
const actual = fuente();
if (ultimaEntrada === actual && ultimaSalida !== undefined) {
return ultimaSalida;
}
ultimaEntrada = actual;
ultimaSalida = calcular(actual);
return ultimaSalida;
}, { equal: igualdad });
}3. Patrón de Debouncing de Signals
Implementa signals con debounce para búsqueda y manejo de inputs:
javascript
// Signal con debounce para inputs de búsqueda
function crearSignalConDebounce<T>(valorInicial: T, retraso: number) {
const inmediato = signal(valorInicial);
const conDebounce = signal(valorInicial);
let timeoutId: any;
const definir = (valor: T) => {
inmediato.set(valor);
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
conDebounce.set(valor);
}, retraso);
};
return {
inmediato: inmediato.asReadonly(),
conDebounce: conDebounce.asReadonly(),
definir
};
}
// Uso
const busqueda = crearSignalConDebounce('', 300);
// busqueda.inmediato() - valor instantáneo
// busqueda.conDebounce() - valor con debounce para llamadas API4. Patrón de Máquina de Estados con Signals
Construye máquinas de estados robustas con signals:
javascript
// Máquina de estados usando signals
function crearMaquinaDeEstados<T extends string>(
estadoInicial: T,
transiciones: Record<T, T[]>
) {
const estadoActual = signal(estadoInicial);
const puedeTransicionarA = computed(() => {
return transiciones[estadoActual()] || [];
});
const transicionarA = (nuevoEstado: T) => {
if (puedeTransicionarA().includes(nuevoEstado)) {
estadoActual.set(nuevoEstado);
return true;
}
return false;
};
return {
estado: estadoActual.asReadonly(),
puedeTransicionarA,
transicionarA
};
}Errores Comunes a Evitar
1. Mutar Objetos Dentro de Signals
javascript
// ❌ No hagas esto - mutar objeto no dispara actualizaciones
const usuario = signal({ nombre: 'Juan', edad: 30 });
usuario().nombre = 'María'; // ¡Esto no disparará change detection!
// ✅ Haz esto en su lugar - crea nueva referencia de objeto
usuario.update(u => ({ ...u, nombre: 'María' }));
// O
usuario.set({ ...usuario(), nombre: 'María' });2. Crear Signals Dentro de Computed
javascript
// ❌ Ejemplo problemático - crea nuevo signal en cada cálculo
const computedMalo = computed(() => {
const signalTemp = signal(0); // ¡No crees signals aquí!
return signalTemp() + otroSignal();
});
// ✅ Solución - crea signals fuera de computed
const signalTemp = signal(0);
const computedBueno = computed(() => {
return signalTemp() + otroSignal();
});3. Olvidar Llamar Funciones Signal
tsx
// ❌ Evita este patrón - olvidando paréntesis
@Component({
template: `<div>{{ contador }}</div>` // ¡No se actualizará!
})
export class ComponenteMalo {
contador = signal(0);
}
// ✅ Enfoque preferido - siempre llama signals como funciones
@Component({
template: `<div>{{ contador() }}</div>` // Propiamente reactivo
})
export class ComponenteBueno {
contador = signal(0);
}Cuándo NO Usar Signals
No uses signals cuando:
- Trabajando con peticiones HTTP - Los Observables manejan mejor las operaciones asíncronas
- Necesites operators de stream complejos (debounce, throttle, retry) - RxJS es más poderoso
- Integrando con APIs existentes basadas en Observable - sobrecarga de conversión innecesaria
javascript
// ❌ Exageración para escenarios simples
const resultadoHttp = signal<Datos | null>(null);
this.http.get('/api/datos').subscribe(datos => {
resultadoHttp.set(datos); // Conversión innecesaria
});
// ✅ Solución simple es mejor
datos$ = this.http.get('/api/datos');
// Usa async pipe en el templateSignals vs RxJS Observables
Los Signals son geniales para:
- Gestión de estado síncrono
- Valores computados simples
- Actualizaciones de UI críticas para performance
- Reducir código boilerplate
Considera Observables cuando necesites:
- Operaciones asíncronas → Peticiones HTTP, streams WebSocket
- Operators complejos → debounceTime, switchMap, retry
- Streams de eventos → fromEvent, interval, timer
Conclusión
Angular Signals son una herramienta poderosa que puede simplificar dramáticamente la gestión de estado en tus aplicaciones. Traen reactividad granular, rastreo automático de dependencias, y mejor rendimiento a tus componentes Angular.
Puntos clave:
- Los signals son funciones que mantienen y rastrean valores reactivos
- Los computed signals derivan automáticamente estado de otros signals
- Los effects manejan side effects con rastreo automático de dependencias
- Los signals eliminan la gestión manual de suscripciones y memory leaks
La próxima vez que vayas a usar un Subject o BehaviorSubject para estado de componente, recuerda los signals. Tu código será más limpio, más performante, y más fácil de entender.
¿Ya has empezado a usar signals en tus proyectos Angular? ¿Qué patrones has descubierto? ¡Comparte tus experiencias en los comentarios!
Si esto te ayudó a mejorar tus habilidades en Angular, ¡sígueme para más patrones y mejores prácticas modernas de Angular! 🚀
