Angular – Remove Data with HTTP DELETE

In the last article of this Angular tutorial, we discussed how to update data with HTTP PUT. In this lesson, you will learn how to remove data with HTTP Delete.

http delete

To enable us to remove data with HTTP delete, the delete function must be added first. Adding the Delete function is similar to the previous topics. Simply follow these steps:

1. Just below the updateStock(), add a deleteStock() method in the stock.service.ts file.

http delete

2. On the dashboard.component.ts file, create the deleteStock subscriber method. 

http delete

3. Add the Delete button beside the update button in dashboard.component.html.

http delete

Now, let’s test if our delete button works. Save your work and go back to your browser.

http delete

Try deleting Hewlett Packard Inc. Click it and reload the page.

http delete

And it’s gone! Your Delete function is fully operational and you can now remove any data by using the HTTP delete function.

Now, let’s add the style for our button and add a loader that automatically refreshes the table once you issue the command. To do that, simply head back to your IDE.

http delete

In dashboard.component.html, change the btn class of the Delete button to ‘btn-danger’

http delete

Then add the command location.reload() on the deleteStock() method. Save your work and go back to your browser to see if it works.

http delete

As you can see, the delete button is now red and the page reloads automatically when delete is pressed. You’re done!

On the next section, we will tackle FORMS.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.