Angular 9 and Spring Boot CRUD Tutorial – Feature 3 Update expense details

Hey in the previous post we covered saving the expense details to the database, in this post we will cover updating the expense details. We will continue with the same example which we created in the previous post. Let’s begin…




We will cover the following topics

  • Create rest endpoint to get the single expense
  • We will make HTTP GET request from an angular application
  • We will update the expense details

First, let’s start with creating rest endpoint in spring boot application – inside the ExpenseService.java declare a method to get a single expense object.

Open, ExpenseService.java

Now we need to provide implementation by overriding it inside the ExpenseServiceImpl.java class
Alright, now we have service method to get a single expense object, all we need to do is call this service method inside the ExpenseController.java

Open, ExpenseController.java

Alright, now we have a rest endpoint to get the single expense, let’s test out work through postman –




Now the rest endpoint is working as we expected, let’s move on to the front end part, and make HTTP GET request from the angular application. let’s begin…

Open, expense.service.ts

Now we have an angular service method to get single expense by making HTTP GET request to spring boot application, let’s make use of the service method by calling inside the add-expense.component.ts

Open, add-expense.component.ts

Next, we need to wire up the routerLink inside the list-expense.component.html for the individual expense, to call /editexpense/:id route

Open, list-expense.component.html

At this point, if you save all the changes and run the application, you will see the following screen –




When the user clicks on any of the expense records, control navigate to the add-expense.component.html in which all the details are auto-filled inside the form –

That’s it now if the user makes any changes/updates to the record, and when they click add expense button that will automatically update the record.

How does it happen? Well, when the user clicks the add expense button, control navigates to the component, from there it will call service method, saveExpense()inside we will make an HTTP POST request to spring boot application. So now the spring boot calls the JpaRepository save() method. This save() works in both ways, meaning if the id available then it will update the record, if the id is not available then it will create new record.




You can find the Github repository here

You can find the step by step video series here




Leave a Reply

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