Voy a empezar a crear esta guia para mi, aunque ya existe mucho material espero que a alguien le sirva.
El input es un decorador que pertenece al angular-core. Primero defino en el hijo los atributos que creo que voy a necesitar para un producto, en este caso con el title, price y img esta ok.
Con el required:true es decirle que el campo si o si es requerido.
Ahora estos elementos los podemos enviar al template:
product.component.ts
export class ProductComponent {
@Input({required: true}) img : string = '';
@Input({required: true}) price : number = 0;
@Input({required: true}) title : string = '';
}
Los llamo desde el template con string interpolation.
product.component.html
<div>
<img [src]="img" alt="image">
<h3>{{title}}</h3>
<p>{{price}}</p>
</div>
Y por ultimo los envio como inputs desde el componente padre al hijo mediante property binding.
list.component.html
<div class="grid grid-cols-3">
<app-product [title]="'test 1'" [price]="12" img="https://picsum.photos/340/340?r=23" />
<app-product [title]="'test 2'" [price]="14" img="https://picsum.photos/340/340?r=24" />
</div>
usos:
- Por ejemplo, si tenes un componente hijo que muestra detalles de un artículo, puedes usar @Input para pasar el artículo desde el componente padre al hijo.
Top comments (0)