¿Cómo se implementan los inputs en componentes de Angular?
En el mundo del desarrollo front-end, Angular es una herramienta poderosa que permite crear aplicaciones dinámicas y robustas. Un aspecto crucial de Angular es su capacidad para transferir información entre componentes padre e hijo, mediante la implementación de "inputs". Estos inputs funcionan como atributos que transfieren datos a través de property bindings, permitiendo una comunicación fluida y eficiente entre los diferentes componentes de una aplicación Angular.
¿Qué son los inputs en Angular y cómo funcionan?
Los inputs en Angular son decoradores que permiten la comunicación unidireccional de datos desde un componente padre a un componente hijo. Este flujo de información es esencial para compartir atributos como el título, la imagen o el precio de un producto desde un componente principal hacia uno secundario o hijo, como un app-product.
¿Cómo se declaran los inputs en un componente?
Para declarar inputs en un componente, se utiliza el decorador @Input() proporcionado por Angular. Este decorador se aplica sobre las propiedades del componente que recibirán datos desde el componente padre. Aquí tienes un ejemplo en TypeScript:
Cada input puede y debe inicializarse con un valor por defecto para prevenir errores cuando los datos aún no se han proporcionado desde el componente padre. En el ejemplo anterior, la imagen se inicializa con una cadena vacía, mientras que el precio se inicializa en 0.
¿Cómo se utiliza property binding para enviar información?
El property binding es el método que permite enviar valor directamente a los inputs desde el componente padre. Se implementa en la plantilla del componente padre. A continuación, se observa un ejemplo:
¿Qué rol juegan los valores "requeridos" en los inputs?
Es posible especificar que ciertos inputs sean obligatorios al establecer su propiedad required en true. Esto asegura que los componentes reciban todos los datos necesarios para funcionar correctamente, previniendo errores por falta de información vital como un título, un precio o una imagen.
¿Cómo manejar errores y valores por defecto en Angular?
Cuando un input es obligatorio pero no se proporciona un valor, Angular emite un error. La utilización de valores por defecto asegura que el componente no falle aunque no se proporcionen todos los datos:
Al establecer valores requeridos, se previenen problemas como la falta de imagen en un componente de producto, obligando al desarrollador a proporcionar toda la información necesaria desde el componente padre. Esto ayuda no solo a mantener la integridad de los datos, sino también a mejorar la experiencia del usuario final.
En resumen, los inputs son una herramienta fundamental en Angular para compartir datos entre componentes, permitiendo una arquitectura de aplicación más modular y eficiente. ¡No dudes en seguir explorando y descubriendo más sobre las maravillas de Angular y sus capacidades para desarrollar aplicaciones impresionantes!
en angular 18
img = input.required<string>(); price = input.required<number>(); title = input.required<string>();
Para este ejemplo Product es el padre y List es el hijo
ahh es alrevez hehehe
Buenas!, ¿Porque a mi no me esta marcando el error en list.component.html cuando pongo que sea obligatorio el img, como explica en el video? tengo que configuar algo en el VS Code para ver eso?
Debes agregarlo al import
En el component de lista cree un array de prueba.
@Component({selector:'app-list',imports:[ProductComponent],templateUrl:'./list.component.html',styleUrl:'./list.component.scss'})exportclassListComponent{ productList =[{img:`https://picsum.photos/200/300?r="${Math.random()}`,title:'Producto A',price:30.4,},{img:`https://picsum.photos/200/300?r="${Math.random()}`,title:'Producto B',price:49.50,},{img:`https://picsum.photos/200/300?r="${Math.random()}`,title:'Producto C',price:12.75,},{img:`https://picsum.photos/200/300?r="${Math.random()}`,title:'Producto D',price:99.00,},{img:`https://picsum.photos/200/300?r="${Math.random()}`,title:'Producto E',price:19.99,},];constructor(){}}```En el template padre del mismo componente de lista usé un For:
```js
<div class="w-[90%] mt-10 my-0 mx-auto grid grid-cols-3 gap-3 justify-items-center"> @for(product of productList; track product;let id = $index){<app-product img={{product.img}} title={{product.title}} price={{product.price}}/>}</div>```-El componente hijo está configurado tal cual como se hizo en la clase.\-El resultado fueron 5 productos con datos insertados de forma dinámica. \-Los inputs entonces son como los props es React, que genial.
Platzi please, que locura dejar un comentario con código XD
una corrección
<div class="w-[90%] mt-10 my-0 mx-auto grid grid-cols-3 gap-3 justify-items-center"> @for(product of productList; track product;let id = $index){<app-product
[img]="product.img"[title]="product.title"[price]="product.price" addToCard="productsCreated($event)"/>}</div>
en esta clase estamos viendo el @Input pero ahora con la nueva actualización no es recomendable usar el input como signal así como también el output o estoy equivocado?
Con las nuevas actualizaciones, Angular promueve Signals para manejar datos reactivos de forma más eficiente. Sin embargo, @Input y @Output siguen siendo totalmente válidos, y la decisión de usarlos depende del caso de uso y del estado de tu proyecto.
Si estás desarrollando con Signals, puedes reemplazar @Input y @Output en ciertos casos para aprovechar las mejoras de rendimiento y simplicidad. Pero no hay problema en seguir con los métodos tradicionales mientras Angular mantiene su compatibilidad.
Si desde mi componente padre hago una petición http, cómo podría enviar esa respuesta al componente hijo para que haga validaciones?
Precisamente por medio de los inputs puede lograr hacer ese envío de datos en el componente padre obtienes los datos y esos datos se los envías al hijo por medio de input, ahora validar datos es otra cosa necesitaría más contexto para responderte.
✅
📍Inputs requeridos mejoran la calidad del código
Me llevo que marcar inputs como required ayuda a prevenir errores de uso, obliga a pasar datos esenciales y mejora la calidad y mantenibilidad del componente.
📍Property binding como forma correcta de pasar datos
Me llevo que el property binding [propiedad] es la forma correcta y explícita de enviar información desde el componente padre al hijo, manteniendo el flujo de datos ordenado.
📍Importancia de los valores por defecto
Me llevo que inicializar los inputs con valores por defecto evita errores durante el renderizado y hace que los componentes sean más robustos y predecibles.
📍Uso de @Input() para definir contratos de datos
Me llevo que declarar inputs con @Input() equivale a definir un contrato de datos: el componente hijo deja explícito qué información necesita para funcionar.
📍Los inputs como puente entre componentes
Me llevo que los @Input() son el mecanismo principal de comunicación unidireccional entre componentes padre e hijo en Angular, permitiendo pasar datos de forma clara y controlada.
