Modifying Data Through HTTP

Learn how to implement the functionality of adding new data using HTTP in an Angular CRUD application.

We'll cover the following

Modifying data in a CRUD application usually refers to adding new data and updating or deleting existing data. To demonstrate how to implement such functionality in an Angular application using the HttpClient service, we will make the following changes to our application:

  • Create an Angular component to add new products.

  • Modify the product detail component to change the price of an existing product.

  • Add a button in the product detail component for deleting an existing product.

We will start with the component for adding new products.

Adding new products

To add a new product through our application, we need to send the name and price of a new product into the Fake Store API. Before implementing the required functionality for adding products, we must refactor the ProductListComponent class in the product-list.component.ts file as follows:

Get hands-on with 1200+ tech skills courses.