Search⌘ K
AI Features
Home
Courses
Learning Angular

Updating Product Price

Explore how to implement dynamic product price updates within an Angular application. Learn to use Angular's HttpClient patch method to selectively update product data, manage user input through components, and handle asynchronous HTTP requests effectively.

We'll cover the following...

In this lesson, we will add a feature of data modification in our application by changing the price of an existing product.

The price of a product in an e-commerce application may need to change at some point. We need to provide a way for our users to update that price through our application.

Enabling dynamic price updates

  1. Open the products.service.ts file and add a new method for updating a product:

TypeScript 4.9.5
updateProduct(id: number, price: number): Observable<void> {
   return this.http.patch<void>('${this.productsUrl}/${id}', { price 
  });
}

In the preceding method, we use the patch method of the HttpClient service to send the details of the product that we want to modify to the API. Alternatively, we could use the ...