If your object looks like this: { "productId": 3, "name": "Product A" }

You should change the HTML to: <button (click)="deleteProduct(course.productId)">Delete

In your component: deleteProduct(id: number) { console.log("Deleting product with ID:", id); if (!id) { console.error("Product ID is invalid:", id); return; } this.dataService.deleteProduct(id).subscribe({ next: (response) => { alert("Deleted"); window.location.reload(); // not the best UX, consider updating the list instead }, error: (err) => { console.error("Error deleting product", err); } }); }