5. ProductCardComponent (Tarjetas + Botón Eliminar)

5.3. Integrar product-card en ProductsListComponent

Por cada producto usamos una tarjeta <app-product-card>.

La lista llama al componente tarjeta y le pasa el producto.

Esto es un ejemplo de comunicación entre componentes:

el listado contiene muchos productos y la tarjeta representa uno.

Abre products-list.component.ts y añade:

import { ProductCardComponent } from '../product-card/product-card.component';

En el decorador:

imports: [CommonModule, ProductCardComponent]

Ahora actualiza el HTML products-list.component.html:

<h2 class="fw-semibold mb-3">Listado de Productos</h2>

<div class="row g-4">
  @for (product of productos; track product._id) {
    <div class="col-12 col-sm-6 col-md-4 col-lg-3">
      <app-product-card [product]="product"></app-product-card>
    </div>
  }

  @empty {
    <p class="text-muted">No hay productos para mostrar…</p>
  }
</div>

Guardamos y recargamos la aplicación.

Ahora se muestra tantas veces el productCard como productos tengamos.

Nos quedaría dar formato al productoCard para mostrarlo elegante