Comunicación Padre-Hijo con Inputs y Outputs en Angular

Curso de Angular: Componentes y Servicios

Contenido del curso

Componentes

Servicios

Pipes y Directives

Best practices

Despedida

20
Componentes y Servicios en Aplicaciones Web
01:09 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:06

Comunicación Padre-Hijo con Inputs y Outputs en Angular

Curso de Angular: Componentes y Servicios

Clase 11 de 20

Clase 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.

Arturo Baduna

Hace 4 años

la verdad no entiendo como hace la suma del precio ?

Platzi Team

Hace 4 años

myShopingCart: Product[] = [];

onAddToShopingCart(product: Product){
	this.total = this.myShopingCart.reduce((sum, item) => sum + product.price, 0);
}

Este código calcula el total de una lista de productos en un carrito de compras. Aquí hay una explicación detallada de lo que sucede en cada parte del código:

this.myShoppingCart se refiere al carrito de compras, que es un objeto que contiene una lista de productos.
reduce() es un método de array que se utiliza para reducir los elementos de un array a un único valor. En este caso, se utiliza para sumar los precios de todos los productos en el carrito.
(sum, item) es una función de reducción que se utiliza para acumular el total de precios. En cada iteración, sum representa el acumulador, es decir, el valor acumulado hasta el momento, y item representa el siguiente elemento en la lista, que en este caso es un objeto que contiene información sobre un producto.
sum + product.price es la operación que se realiza en cada iteración de reduce(). product.price se refiere al precio del producto actual, y se suma al acumulador sum. Al final de la iteración, el nuevo valor de sum se utiliza en la siguiente iteración como el acumulador actualizado.
0 es el valor inicial del acumulador. En la primera iteración, sum se establece en este valor y luego se actualiza en cada iteración.

Por lo tanto, al final de la reducción, this.total contendrá la suma de los precios de todos los productos en el carrito.

Comentarios (22)22 comentarios

Kevin Bueno

Hace 5 años

Jimmy Buriticá Londoño

Camilo Alonso Hernandez Cediel

Hace 3 años

Rodolfo Rafael Ruiz Rodriguez

Nicolás Castro Barón

Juan Esteban Orozco Botero

Dionel Cristian Martinez

Jhon Alexander Alvarez Romero

David Castro

Alexis E. COLQUE CAYPA

Carlos Dugarte

Carlos Eduardo González Cortes

Daniel Meza

Pablo Antipan Quiñenao

Airel Jaramillo

Santiago Velandia Gallo

Vsqz Gabriel

Damián Valenzuela Negrete

Andrés Felipe Eslava Zuluaga

Juan Miguel Jimenez

Ruth Lovece

Platzi

Ahorra Seguros

Daniela Stornelli

Fernando Alejandro Yerena Ramos

Diego Fernando Caviedes Camaho

Néstor Raúl Guzmán Díaz

Hace un año

Brandon Lee Aguero Fernandez

David Cornejo

Nicolas Pantoja Diaz

Componentes

Desarrollo de Tienda Online con Angular Avanzado

Creación y Gestión de Componentes en Angular

Comunicación de Componentes: Envío de Datos con Inputs en Angular

Comunicación de Eventos entre Componentes en Angular

Creación y Reutilización de Componentes en Angular para Tiendas

Ciclo de Vida de Componentes en Angular: Constructor a OnDestroy

Manejo de eventos y limpieza en Angular con ngOnDestroy y setters

Componentes en Angular: Creación y Organización de Productos

Estilos en Angular: Alcance y Maquetación de Componentes

Despliegue Dinámico de Menú Lateral en Angular

Comunicación Padre-Hijo con Inputs y Outputs en Angular

Servicios

Creación y uso de servicios en Angular para lógica de negocio

Inyección de Dependencias en Angular: Conceptos y Funcionamiento

Conexión a APIs usando HTTP Client Module en Angular

Pipes y Directives

Uso de Pipes en Angular: Transformación y Formatos

Creación de Pipes Personalizados en Angular

Creación y Uso de Directivas en Angular para Manipular el DOM

Best practices

Reactividad y Manejo de Estado en Angular con NGRX

Implementación de Linter en Angular para Buenas Prácticas de Código

Despedida

Componentes y Servicios en Aplicaciones Web

Comunicación Padre-Hijo con Inputs y Outputs en Angular

Progreso del curso

Componentes

Servicios

Pipes y Directives

Best practices

Despedida

Recursos

Recursos