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")
}
Top comments (0)