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.
2. On the dashboard.component.ts file, create the deleteStock subscriber method.
3. Add the Delete button beside the update button in dashboard.component.html.
Now, let’s test if our delete button works. Save your work and go back to your browser.
Try deleting Hewlett Packard Inc. Click it and reload the page.
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.
In dashboard.component.html, change the btn class of the Delete button to ‘btn-danger’
Then add the command location.reload() on the deleteStock() method. Save your work and go back to your browser to see if it works.
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.