No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Adquiere por un año todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/año

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

0D
6H
12M
58S

Comunicación padre e hijo

11/20
Recursos

Establece una comunicación entre un componente padre con uno hijo para saber qué productos quiere agregar el usuario a su carrito de compras y poder visualizar el total a pagar.

Comunicación componente hijo a padre

Paso 1: Agrégale al componente hijo un @Output() para emitir un mensaje al componente padre cuando el usuario agrega un producto al carrito.

El método addToShoppingCart() emitirá el evento cuando el usuario haga clic en el botón.

// components/producto/producto.component.ts
@Component({
  selector: 'app-producto',
  templateUrl: './producto.component.html',
  styleUrls: ['./producto.component.scss']
})
export class ProductoComponent {

  @Input() producto!: Producto;
  @Output() addProduct = new EventEmitter<Producto>();

  addToShoppingCart(p: Producto): void {
    this.addProduct.emit(p);
  }
}
<!-- components/producto/producto.component.html -->
<div>
    <h2>{{ producto.name }}</h2>
    <img [src]="producto.image" width="200px" height="200px">
    <p>Precio: {{ producto.precio }}</p>
    <button (click)="addToShoppingCart(producto)">Agregar al carrito</button>
</div>

Paso 2: En el componente padre crea un método para recibir el mensaje, agregarlo al carrito de compras y calcular el monto total a pagar.

// catalogo/catalogo/catalogo.component.ts
@Component({
  selector: 'app-catalogo',
  templateUrl: './catalogo.component.html',
  styleUrls: ['./catalogo.component.scss']
})
export class CatalogoComponent {

  public shoppingCart: Producto[] = [];
  public total = 0;

  public productos: Producto[] = [
    /* ... */
  ];

  addProductToCart(p: Producto): void {
    this.shoppingCart.push(p);
    this.total += p.precio;
  }
}

Paso 3: El método addProductToCart() recibe el producto, lo guarda en el array shoppingCart y calcula el total a pagar por el usuario. Puedes imprimir estos valores fácilmente con una interpolación.

<!-- catalogo/catalogo/catalogo.component.ts -->
<div *ngIf="productos" class="catalogo">
  <app-producto *ngFor="let p of productos"
    [producto]="p"
    (addProduct)="addProductToCart($event)"
  ></app-producto>
</div>
<div>
    <h3>Cantidad: {{ shoppingCart.length }}</h3>
    <h3>Total a pagar: {{ total }}</h3>
</div>

La comunicación de componente es escencial en cualquier aplicación front-end. Es importante saber manipular el envio de información ya sea de forma descendente o ascendente en la jerarquía de componentes.


Contribución creada con los aportes de Kevin Fiorentino.

Aportes 11

Preguntas 8

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Muy bien estructurado el curso para ir integrando y prácticando las características de angular

Otra manera de ir sumando el total:

this.total += product.price;

Sabes que todo va a salir bien cuando el profe usa el método reduce😎😎

En verdad Nicolas me asombra con el manejo de arrays y los metodos que usa, el mismo metodo que utilizo para sumar totales, yo lo trate de hacer y eran 5 lineas, mientras que el la hizo en 1
Gracias Nico, eres grande!!!

Aquí podrán ver mas sobre el comportamiento de comunicación entre componentes, con ejemplos: https://soka.gitlab.io/angular/conceptos/componentes/comunicacion-entre-componentes/comunicacion-entre-componentes/

Está muy bueno este curso. Aprendí Angular en Udemy hace un tiempo, pero esta serie de cursos me resulta genial para refrescar algunos conceptos clave.

El Concepto de componentes y de lo que podemos hacer con ellos me quedo muy claro con este curso

También podemos validar que en el carrito de compras no hayan productos repetidos, comprobando cuando vayamos a añadir un producto al carrito, que dicho producto no haya sido añadido al carrito anteriormente:

addedProducts: Product [] = []; //CARRITO DE COMPRAS

totalPrice: number = 0; //PRECIO TOTAL DEL CARRITO DE COMPRAS

onAddToShoppingCart(productAdded: Product){

    // VERIFICAMOS QUE EL PRODUCTO NO ESTÉ YA DENTRO DEL CARRITO DE COMPRAS
    if(this.addedProducts.includes(productAdded)){
      console.log("El producto ya ha sido agregado al carrito");
    } else {
      this.addedProducts.push(productAdded);

      //RECALCULAMOS EL VALOR TOTAL DEL PRODUCTO DE COMPRAS:
      //this.totalPrice += productAdded.price;
      this.totalPrice = this.addedProducts.reduce((sum, product) => sum + product.price, 0);
    }

    console.log(this.addedProducts);
    console.log("TOTAL:", this.totalPrice);

  }
}

Excelente primer módulo! Todo está muy bien explicado, Gracias!

Cada día más emocionado con este curso. Muchas gracias Nicolas.

Super chevere Nicolas es un buen profesor, no sufro mucho al implementar el codigo corre muy bien,