Angular 9 and Spring Boot CRUD Tutorial – Feature 4 Delete expense details

Hey everyone, in the previous post we discussed updating the expense details, and in this post, we will discuss deleting an expense. we can delete expense from two different places, one is in the list expense page, where each expense contains the delete button/link and another place inside the add expense page while editing the expense. Let’s add this to both the places…




We will cover the following topics –

  • First, we will create a rest endpoint to delete an expense
  • Next, we will make delete request to rest endpoint from angular application

First, let’s declare a new method inside the ExpenseService.java to delete an expense

Now let’s provide an implementation for deleting an expense inside the ExpenseServiceImpl.java

Now we have a service method for deleting an expense, all we need to do is call this service method inside the ExpenseController.java

Alright, now we have a rest endpoint to delete an expense, all we need to do is test our work –




Now let’s move on to the front end part – let’s utilize this rest endpoint to make HTTP delete request for deleting an expense

Open expense.service.ts, add the following code –

Now let’s call this service method inside the component, so as we discussed earlier we will delete expense from 2 different places, first let’s add inside the list expenses page.

Open list-expenses.component.ts, add the following code

Now, let’s add delete button/link inside the list-expenses.component.html view template

At this, if you run the application, you will see the following output –




Now let’s add the same functionality inside the add-expense.component.ts file

Now we need to add the delete button/link inside the add-expense.component.html view template




At this point, if you run the application, you will see the following output –

That’s it for this post, in the next post we will look at the search operation.




You can find the Github repository here

You can find the step by step video series here

 

About the author

Bushan Sirgur

Well, I am Bushan Sirgur from Banglore, India. Currently, I am working as a Software Developer in a Service Base Company. I am interested in JAVA/J2EE, Angular 2, JavaScript, jQuery, MongoDB.

View all posts

Leave a Reply

Your email address will not be published. Required fields are marked *