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

Carlos Morales

21 Feb 202410:19

Summary

TLDREste 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.

Outlines

00:00

🔍 Angular 17 y la Reactividad con Input Signals

Este segmento introduce Angular 17.1 y su nueva funcionalidad de 'input signals' que promete cambiar la forma de programar reactivamente, solucionando problemas con el manejo de inputs reactivos. Se presenta un problema común con los inputs y se explica cómo antes de Angular 17.1 se solucionaba mediante el uso de setters y el patrón ngOnChanges. Luego, se muestra cómo Angular 17.1 simplifica este proceso al introducir 'input signals', permitiendo que los inputs sean reactivos y actualicen la UI automáticamente sin necesidad de métodos adicionales. Se destaca la importancia de esta actualización para hacer el desarrollo más intuitivo y eficiente.

05:02

🛠 Mejoras y Flexibilidad en Angular 17 con Input Signals

Este párrafo profundiza en las capacidades avanzadas de los 'input signals' en Angular 17, destacando su compatibilidad y flexibilidad mejoradas. Se explica cómo se pueden hacer inputs requeridos, cambiar aliases y realizar transformaciones de datos de manera sencilla, lo que refleja un enfoque más funcional de Angular. Además, se menciona la compatibilidad con ciclos de vida existentes y se anticipa un cambio hacia un enfoque basado en signals. Finalmente, se promueve la participación de la comunidad a través de un sorteo, incentivando la interacción y el feedback sobre estas nuevas características.

10:03

🎁 Invitación a Participar y Aprender con Angular

El último segmento se enfoca en la invitación a la audiencia para participar en un sorteo de un curso, como agradecimiento por el apoyo al canal y para fomentar el aprendizaje continuo. Se hace énfasis en la importancia de aprovechar las nuevas funcionalidades de Angular para mejorar las habilidades de desarrollo y se anima a la comunidad a participar activamente en la discusión y el intercambio de conocimientos.

Mindmap

Keywords

💡Input Signals

Los Input Signals son una nueva característica introducida en Angular 17.1 que reemplazan la forma tradicional de manejar las propiedades de entrada (inputs) en los componentes. Según el video, los Input Signals simplifican el proceso de hacer que los valores de entrada sean reactivos, es decir, que se actualicen automáticamente cuando cambien. En lugar de usar decoradores como `@Input()`, se utiliza la sintaxis `input Signals` para definir los valores de entrada. Esto promete un cambio en la forma de programar de manera reactiva en Angular.

💡Señales computadas

Las señales computadas, también conocidas como `computed signals`, son una forma de derivar nuevos valores a partir de otros valores reactivos existentes. En el video, se muestra un ejemplo donde se utiliza la función `computed()` para cortar un nombre basado en el valor del `input Counter`. Cuando el `Counter` cambia, el `computed signal` se actualiza automáticamente para reflejar el nuevo valor truncado del nombre. Esto permite crear lógica reactiva compleja de una manera más declarativa y fácil de mantener.

💡Reactivo

El término 'reactivo' se refiere a la capacidad de un sistema o componente para responder automáticamente a los cambios en los datos o entradas. En el contexto del video, se menciona que antes de Angular 17.1, los `inputs` no eran reactivos de forma nativa, lo que requería el uso de técnicas adicionales para lograr la reactividad. Con la introducción de los Input Signals, Angular busca hacer que la programación reactiva sea más fácil y más integrada en el framework.

💡Decoradores

Los decoradores son una sintaxis especial en Angular (y TypeScript) que se utiliza para anotar o agregar metadatos a clases, propiedades, métodos, etc. En el video, se menciona que con la llegada de los Input Signals, es posible que los decoradores ya no sean necesarios para definir los valores de entrada (`@Input()`). Esto sugiere que Angular está explorando un enfoque más funcional y declarativo en lugar de depender en gran medida de los decoradores.

💡Requerido

La propiedad 'requerido' (o 'required' en inglés) se refiere a la capacidad de marcar un Input Signal como obligatorio, lo que significa que debe ser proporcionado por el componente padre. En el video, se muestra cómo se puede aplicar la propiedad 'required' a un Input Signal utilizando la sintaxis `input.required`. Esto evita la necesidad de inicializar el valor en el componente hijo y garantiza que siempre se reciba un valor del componente padre.

💡Alias

Un alias es un nombre alternativo que se puede asignar a un Input Signal. En el video, se demuestra cómo se puede cambiar el nombre del Input Signal 'Counter' a 'bwe' utilizando la propiedad 'alias' en la configuración del Input Signal. Esto puede ser útil para evitar conflictos de nombres o para hacer que los nombres sean más descriptivos y significativos en diferentes contextos.

💡Transform

La propiedad 'transform' en un Input Signal permite transformar el valor recibido antes de asignarlo a la propiedad correspondiente. En el ejemplo del video, se muestra cómo se puede multiplicar el valor del `Counter` por 2 antes de asignarlo a la propiedad utilizando una función de transformación. Esto proporciona una forma flexible de manipular los datos de entrada antes de que se utilicen en el componente.

💡Inferencia de tipos

La inferencia de tipos es una característica de TypeScript que permite deducir automáticamente el tipo de una variable o expresión basándose en su valor o contexto. En el video, se menciona que al utilizar la propiedad 'transform' en un Input Signal, Angular puede inferir el tipo de retorno de la función de transformación y no es necesario especificarlo explícitamente. Esto simplifica el código y aprovecha las capacidades de TypeScript para una mejor experiencia de desarrollo.

💡LifeCycle Hooks

Los LifeCycle Hooks (o ganchos de ciclo de vida) son métodos especiales en Angular que se ejecutan en diferentes etapas del ciclo de vida de un componente, como la creación, la actualización o la destrucción. En el video, se menciona que con la llegada de los componentes basados en señales, es posible que los LifeCycle Hooks actuales dejen de ser utilizados y sean reemplazados por otros enfoques, como el uso del `effect` para depurar y observar los cambios en las señales.

💡Effect

El 'effect' es un concepto que se menciona en el video como una posible alternativa futura a los LifeCycle Hooks actuales en Angular. Si bien no se proporciona una explicación detallada, se sugiere que el 'effect' podría ser una forma de observar y reaccionar a los cambios en las señales (signals) dentro de los componentes basados en señales. Esto probablemente esté relacionado con un enfoque más funcional y declarativo para el manejo del estado y la reactividad en Angular.

Highlights

Angular 17.1 introduce los input signals, que cambiarán la forma de programar reactivamente.

Los input signals reemplazan la necesidad de usar decoradores @Input para hacer las propiedades reactivas.

Con input signals, se puede convertir una propiedad en reactiva usando `input: InputSignal` de `@angular/core`.

Los input signals soportan la propiedad `required` para hacer la propiedad obligatoria.

Se puede cambiar el alias de la propiedad con la opción `alias` en la configuración del input signal.

La opción `transform` permite transformar el valor del input signal antes de asignarlo.

Los input signals son compatibles con la API de inputs anterior, por lo que se pueden seguir utilizando mientras están en developer preview.

El uso de `ngOnChanges` para detectar cambios en inputs signals funcionará de momento, pero eventualmente se utilizará `effect` en su lugar.

Se mencionó un sorteo de un curso para los suscriptores del canal al llegar a 1000, pero no se pudo hacer por limitaciones técnicas.

Como alternativa, se hará el sorteo del curso entre los comentarios de este video.