Signal Inputs en Angular 17

Angular 17 introduce un enfoque innovador para gestionar las entradas de componentes usando signals, mejorando significativamente la flexibilidad y eficiencia de las aplicaciones en Angular. Esta guía explorará los aspectos clave de los signal inputs, sus beneficios y ejemplos prácticos para ayudarte a aprovechar esta característica de manera efectiva.

¿Qué son los Signal Inputs?

Los signal inputs en Angular 17 reemplazan el decorador tradicional @Input() con un enfoque más reactivo y declarativo. Un signal es un tipo especial de observable que proporciona una manera limpia y eficiente de manejar los cambios de entrada dentro de los componentes de Angular. A diferencia de las entradas regulares, los signal inputs no requieren hooks de ciclo de vida como OnChanges para detectar cambios.

Beneficios de los Signal Inputs

1. Reactividad Declarativa: Los signal inputs permiten declarar dependencias y reaccionar a los cambios de manera sencilla. Usando las funciones computed y effect, puedes derivar valores y ejecutar efectos secundarios cuando cambian las entradas sin necesidad de verificar manualmente los cambios​.
2. Seguridad de Tipos: Tambien mejoran la seguridad de tipos, asegurando que las entradas requeridas siempre se proporcionen, eliminando la necesidad de valores predeterminados o afirmaciones de no nulidad. Esto hace que el código sea más limpio y reduce los posibles errores en tiempo de ejecución.
3. Mejoras de Rendimiento: Para los componentes que usan la estrategia de detección de cambios OnPush, los signal inputs marcan automáticamente el componente como sucio cuando una entrada cambia, asegurando que la vista se actualice de manera eficiente.

Ejemplos Prácticos de los Signal Inputs

Aquí hay una comparación práctica entre el uso tradicional de @Input() y los nuevos signal inputs:

Ejemplo de Input Tradicional

@Component({
  selector: 'normal-input-component',
  template: `<div>{{ doubleCount }}</div>`,
})
export class NormalInputComponent implements OnChanges {
  @Input() count = 0;
  doubleCount = 0;

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['count']) {
      this.doubleCount = this.count * 2;
    }
  }
}

Ejemplo de Signal Input

@Component({
  selector: 'signal-input-component',
  template: `<div>{{ doubleCount() }}</div>`,
})
export class SignalInputComponent {
  count = input.required<number>();
  doubleCount = computed(() => this.count() * 2);
}

En el ejemplo de signal input, el valor doubleCount se recalcula automáticamente cada vez que la entrada count cambia, sin necesidad del hook OnChanges.

Características Avanzadas de los Signal Inputs

1. Computed Signals: Usando la función computed, puedes derivar valores de otros signals. Esto proporciona una manera reactiva de manejar el estado derivado dentro de tus componentes.
2. Effect Function: La función effect permite ejecutar efectos secundarios cuando un signal cambia. Esto puede reemplazar la necesidad de OnChanges y otros hooks de ciclo de vida similares, simplificando la lógica de tu componente​.
3. Pruebas de Signal Inputs: Al probar componentes, puedes establecer valores de entrada usando el método setInput en la referencia del componente. Este enfoque asegura que tus pruebas reflejen con precisión cómo se comporta el componente con diferentes valores de entrada​.

Conclusión

Los signal inputs en Angular 17 ofrecen una manera moderna y eficiente de manejar las entradas de componentes, mejorando tanto el rendimiento como la experiencia del desarrollador. Al adoptar esta nueva característica, puedes escribir código más declarativo, seguro en tipos y reactivo. Ya sea que estés construyendo nuevos componentes o refactorizando los existentes, esta nueva herramienta te proporcionan una solución robusta para gestionar datos de entrada en aplicaciones Angular.

Referencias

1. Angular Signal Inputs Guide
2. Angular University Blog on Signal Components
3. Tim Honermann’s Blog on Signal Inputs
4. Angular Architects on Component Communication with Signals