DEV Community: davidpincheira

uso de @inputs en Angular

davidpincheira — Fri, 08 Mar 2024 02:51:11 +0000

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.

uso de @outputs en Angular

davidpincheira — Fri, 08 Mar 2024 02:50:49 +0000

En el siguiente articulo vamos a ver como enviar datos desde el componente hijo al componente padre, en este caso ProductComponent y ListComponent respectivamente. Esto se puede usar cuando es necesario emitir el numero de items de un carrito de compras al resto de la aplicación o cualquier información que cambie a nivel molecular que afecte toda la aplicacion.

Empecemos, primero vamos a importamos el @output desde @angular/core y le asignamos un nombre addToCartClicked() (este nombre es el que se va a usar para llamarlo desde el padre (ListComponent))

product.component.ts

@Output() addToCartClicked = new EventEmitter();

  addToCartHandler(){
    console.log("click from child")
    this.addToCartClicked.emit("mensaje desde el hijo");
  }

product.component.html

<button (click)="addToCartHandler()">add to cart</button>

y por ultimo se llama a fromChild() que es un metodo con la capacidad de recibir la información enviandole el evento.

Note que aca es donde ocurre la magia, con el metodo (addToCartClicked)=fromChild($event)

list.component.html

    <app-product [title]="'test 1'" [price]="12" img="https://picsum.photos/340/340?r=23" (addToCartClicked)="fromChild($event)" />

list.component.ts

fromChild(event: string){
    console.log("estamos en el padre")
  }