Search⌘ K
AI Features
Home
Courses
Learning Angular

Removing a Product

Explore how to remove a product in an Angular app by integrating HTTP client delete methods and managing component interactions. Learn to update the product list efficiently after deletion and handle user interface elements like buttons and events for this feature.

We'll cover the following...

In this lesson, we will add a feature of data removal in our application by removing an existing product.

Deleting a product from an e-shop application is not very common. However, we need to provide the functionality in case users enter wrong or invalid data and want to delete it afterward.

Implementing product deletion

In our application, the functionality for deleting an existing product will be available in the product details component:

  1. Open the products.service.ts file and add the following method:

TypeScript 4.9.5
deleteProduct(id: number): Observable<void> {
  return this.http.delete<void>('${this.productsUrl}/${id}');
}

The preceding method uses the delete method of the HttpClient service and passes the products endpoint, together with the product id we want to delete in ...