Input Signals en #Angular 17.1 - ¿Cómo usarlos?

Summary

Este video explica las nuevas características de los input signals introducidos en Angular 17.1, que prometen cambiar la forma de programar reactivamente. Se destaca cómo solucionar problemas con los decoradores @Input anteriores y se muestra cómo utilizar los input signals, aprovechando sus beneficios como la reactividad automática, los alias, las transformaciones de datos y la compatibilidad con la configuración anterior. Además, se menciona que los ciclos de vida podrían ser reemplazados por el effect para el manejo de cambios en los signals. En resumen, es una completa guía sobre esta nueva funcionalidad que optimizará el desarrollo en Angular.

Takeaways

• 📍 Angular 17.1 introduce los 'input signals', un nuevo enfoque para manejar las propiedades de entrada en los componentes de forma reactiva.
• 😐 Los decoradores @Input tradicionales tienen limitaciones y no son completamente reactivos, lo que puede causar problemas.
• 😃 Los 'input signals' convierten las propiedades de entrada en señales reactivas, lo que facilita el manejo de cambios y mejora el rendimiento.
• 🆕 Para utilizar 'input signals', se importa 'input' desde '@angular/core' y se declara la propiedad como un InputSignal con una configuración opcional.
• 🚫 Con 'input signals', ya no es necesario utilizar los decoradores @Input para las propiedades de entrada.
• ✨ Los 'input signals' permiten una configuración adicional, como establecer aliases, validaciones, transformaciones y más.
• 🔄 El método 'ngOnChanges' sigue funcionando con los 'input signals', pero se espera que sea reemplazado por 'effect' en el futuro.
• ⚠️ Los 'input signals' aún están en developer preview y no se recomiendan para producción por el momento.
• 🥇 Se mencionó un sorteo de un curso para los suscriptores del canal, que se realizará mediante los comentarios en este video.
• 📢 Se alienta a los espectadores a compartir, dar like y comentar el video para participar en el sorteo del curso.

Q & A

¿Qué son los input signals en Angular 17?

Los input signals son una nueva funcionalidad introducida en Angular 17.1 que permite tratar los inputs como señales reactivas, facilitando la programación reactiva y eliminando la necesidad de utilizar decoradores @Input.

¿Cuál era el problema con los decoradores @Input antes de Angular 17.1?

Antes de Angular 17.1, los inputs decorados con @Input no eran reactivos por sí mismos, lo que dificultaba la actualización automática de las propiedades dependientes cuando el input cambiaba.

¿Cómo se define un input signal en Angular 17.1?

Para definir un input signal, se utiliza la sintaxis `@Input() nombrePropiedad = inputSignal(valorInicial)`, importando `inputSignal` desde `@angular/core`.

¿Qué ventajas ofrecen los input signals en comparación con los decoradores @Input?

Los input signals ofrecen una programación reactiva más sencilla, ya que se actualizan automáticamente cuando su valor cambia, sin necesidad de implementar lógica adicional. Además, son más compatibles con la programación funcional y pueden simplificar el código.

¿Se pueden configurar los input signals de alguna manera?

Sí, los input signals permiten configurar opciones como `required` para hacerlos obligatorios, `alias` para cambiar su nombre y `transform` para transformar su valor antes de asignarlo.

¿Qué alternativas existían antes de los input signals para manejar inputs reactivos?

Antes de los input signals, era necesario envolver los inputs en señales manuales, utilizando patrones como `inputSignal$ = signal(initialValue)` o `@Input() set inputProperty(value: number) { this.inputSignal.set(value); }`.

¿Qué impacto tendrán los input signals en el ciclo de vida de los componentes de Angular?

Se espera que los input signals reduzcan la necesidad de utilizar los ciclos de vida tradicionales de Angular, como ngOnChanges, ya que las propiedades dependientes se actualizarán automáticamente cuando los inputs cambien.

¿Se pueden combinar input signals y decoradores @Input en un mismo componente?

Sí, es posible utilizar input signals y decoradores @Input en un mismo componente, aunque se espera que los input signals reemplacen gradualmente a los decoradores @Input.

¿Qué otras características relacionadas con la programación reactiva se esperan en futuras versiones de Angular?

Se menciona que Angular parece estar enfocándose más en la programación funcional, por lo que se esperan más características relacionadas con efectos y la gestión de señales en futuras versiones.

¿Qué consejo se da sobre el uso de input signals en producción?

Se advierte que, aunque los input signals están disponibles en Angular 17.1, todavía se encuentran en fase de "developer preview", por lo que no se recomienda su uso en producción por el momento, sino más bien para experimentar y familiarizarse con la nueva funcionalidad.