Qué podemos hacer con las señales en Angular?

Ruben
12 de Mar de 2025

Que son las señales de angular

Las señales son wrappers reactivos que almacenan valores y notifican a los componentes cuando cambian. A diferencia de los observables de RxJS, son más sencillas para casos comunes y se integran con el ciclo de detección de cambios de Angular.

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

// Crear una señal
cantidad = signal(0);

Gestión de estado reactivo
Las señales son ideales para manejar estados locales en componentes o servicios.

#Ejemplo de un contador
contador = signal(0);

// Actualizar
incrementar() {
  this.contador.update(valorActual => valorActual + 1);
}

// Establecer directamente
reiniciar() {
  this.contador.set(0);
}

<p>Valor actual: {{ contador() }}</p>
<button (click)="incrementar()">+1</button>

Valores computados (Computed)
Crea valores derivados de otras señales. Se actualizan automáticamente cuando sus dependencias cambian.

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

// Valor derivado
dobleContador = computed(() => this.contador() * 2);

<p>Doble: {{ dobleContador() }}</p>

Efectos (Effects)
Ejecuta lógica cuando una señal cambia.

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

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

Integración con RxJS
Combina señales con observables para manejar flujos asíncronos complejos.

#De Observable a Señal
import { toSignal } from '@angular/core/rxjs-interop';

datos$ = this.http.get('https://api.example.com/data');
datosSeñal = toSignal(this.datos$, { initialValue: [] });

# De Señal a Observable
import { toObservable } from '@angular/core/rxjs-interop';

contador$ = toObservable(this.contador);

Optimización del rendimiento
Las señales permiten a Angular optimizar la detección de cambios, ya que solo se actualizan los componentes afectados por cambios en señales específicas.

Formularios reactivos
Usa señales para manejar el estado de formularios de manera reactiva.

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

nombre = signal('');

// En el template
<input [ngModel]="nombre()" (ngModelChange)="nombre.set($event)" />

En Angular 17+, puedes usar model() para two-way binding simplificado:

nombre = model<string>('');

<input [(ngModel)]="nombre" />

Comunicación con el servidor
Combina señales con peticiones HTTP para manejar estados de carga, éxito o error.

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

datos = signal<any[]>([]);
cargando = signal(false);

async obtenerDatos() {
  this.cargando.set(true);
  try {
    const respuesta = await fetch('https://api.example.com/data');
    this.datos.set(await respuesta.json());
  } finally {
    this.cargando.set(false);
  }
}

Buenas prácticas

Usa señales para estados simples: Ideales para datos primitivos o objetos pequeños.
Combina con RxJS para operaciones complejas: Como cancelación de peticiones o throttling.
Evita efectos anidados: Podrían causar loops no deseados.
Prefiere computed para datos derivados: Mejora la legibilidad y rendimiento.

Las señales en Angular ofrecen una forma moderna y eficiente de gestionar la reactividad, simplificando desde estados locales hasta integraciones avanzadas con RxJS. A medida que el ecosistema evoluciona (ej: componentes basados en señales en Angular 18), su adopción se vuelve clave para construir aplicaciones más rápidas y mantenibles.

Desarrollo
Angular