Actividad entregable

7.4. ProductCard elimine productos

Ahora sí, el botón elimina el producto de la lista.

El componente tarjeta no toca el estado directamente: llama al servicio, y es el servicio quien actualiza la lista. Este es el patrón recomendado en Angular

Abrimos product-card.component.ts:

import { ProductService } from '../../services/product.service';

Constructor

constructor(private productService: ProductService) {}

Añadir método:

eliminar() {
  this.productService.eliminarProducto(this.product._id);
}

Ahora en el HTML de la tarjeta:

<button class="btn btn-danger btn-sm w-100 mt-3"
        (click)="eliminar()">
  Eliminar producto
</button>

Verificamos que funciona en el navegador