mfrb15 / DEV005-burger-queen-api-client

0 stars 1 forks source link

Funcionalidad para cantidad de producto y suma precio del producto #66

Closed Natalia392 closed 1 year ago

Natalia392 commented 1 year ago

Se logró que la función para agregar más productos a la orden también se aplique desde el componente de órdenes. Esto se realizó de la siguiente manera:

En el componente de productos en la orden (products-order) se creó la función addToOrder.

Para eso, se utilizó el @Output, por lo que se importa tanto Output como EventEmitter.

@Output() productAdded = new EventEmitter<Product>();

y así se emite el evento al padre (órdenes):

  addToOrder(product: Product) {
    console.log(product);
    this.productAdded.emit(product);
  }

En el html de este componente, se incluye el click que llama este función recién creada:

<app-button-add (click)="addToOrder(product)"></app-button-add>

En el componente order (padre de product-orders), que ya tenía gracias a el Input que recibía del padre, el array con los productos que se agregaban: @Input() productOrderList: Product[] = [];

Se completa esta función para que se agreguen a ese mismo array:

  onProductAdded(product: Product) {
    console.log(product, 'llego la info al padre')
    this.productOrderList.push(product);
  }

Y finalmente, en el html del componente orders, se añade el atributo (productAdded)="onProductAdded($event)" a la etiqueta de products-orders, lo que quedaría así:

<app-products-order [products]="productOrderList" (productAdded)="onProductAdded($event)"> </app-products-order>

para que reciba el evento emitido desde el componente products-order.