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>();
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í:
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):
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:
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.