Angular: Signals y reactividad

En Angular 18, la introducción del módulo Signals ha traído una nueva forma de manejar la reactividad en nuestras aplicaciones. Este módulo permite una gestión más eficiente y comprensible del estado y las dependencias reactivas. A continuación, exploraremos cómo utilizar Signals en Angular 18 para mejorar el rendimiento de nuestras aplicaciones.

¿Qué es Signals en Angular 18?

Signals es un módulo que facilita la creación y gestión de señales reactivas. Una señal es una variable que puede ser observada por otros componentes o servicios, y que notifica automáticamente a sus observadores cuando su valor cambia. Esto es especialmente útil para mantener sincronizados los estados de diferentes partes de una aplicación.

Creación de una señal

Para crear una señal en Angular 18, utilizamos la función createSignal. Esta función devuelve un par de funciones: una para obtener el valor actual de la señal y otra para actualizar dicho valor.

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

const [getCounter, setCounter] = createSignal(0);

// Obtener el valor actual de la señal
console.log(getCounter()); // 0

// Actualizar el valor de la señal
setCounter(1);
console.log(getCounter()); // 1

Uso de señales en componentes

Las señales pueden integrarse fácilmente en los componentes de Angular. A continuación, se muestra un ejemplo de cómo utilizar señales dentro de un componente para gestionar el estado de un contador.

import { Component } from '@angular/core';
import { createSignal } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <div>
      <p>Valor del contador: {{ counter() }}</p>
      <button (click)="increment()">Incrementar</button>
    </div>
  `
})
export class CounterComponent {
  private [counter, setCounter] = createSignal(0);

  increment() {
    this.setCounter(this.counter() + 1);
  }
}

En este ejemplo, counter es una señal que almacena el valor del contador, y setCounter es la función utilizada para actualizar su valor. El método increment se encarga de incrementar el valor del contador cada vez que se hace clic en el botón.

Reactividad avanzada con efectos

Además de las señales básicas, el módulo Signals de Angular 18 también permite la creación de efectos, que son funciones que se ejecutan automáticamente cuando cambian las señales de las que dependen. Esto es útil para realizar tareas como llamadas a servicios o actualizaciones de interfaz de usuario en respuesta a cambios en el estado.

import { createEffect, createSignal } from '@angular/core';

const [getCounter, setCounter] = createSignal(0);

createEffect(() => {
  console.log(`El contador ha cambiado: ${getCounter()}`);
});

// Actualizar el valor de la señal
setCounter(1); // Consola: "El contador ha cambiado: 1"

Integración con servicios

Las señales también pueden ser utilizadas dentro de los servicios de Angular para gestionar estados compartidos entre múltiples componentes.

import { Injectable } from '@angular/core';
import { createSignal } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CounterService {
  private [counter, setCounter] = createSignal(0);

  getCounter() {
    return this.counter;
  }

  increment() {
    this.setCounter(this.counter() + 1);
  }
}

En este servicio, la señal counter se gestiona de manera centralizada, permitiendo que múltiples componentes puedan observar y modificar su valor.