Angular 9 and Spring Boot CRUD Tutorial – Feature 2 Save the expense to database

Hey in this post, we will continue with the application which we created in our previous post. In this post, we will cover saving the expense record to the database. let’s begin…




We will cover the following topics in this post,

  • Create rest endpoint to save expense object
  • Make HTTP POST request from an angular application to save the record

First, let’s create a rest endpoint to save the expense object – inside the ExpenserService.java, declare a new method to save the expense object.

Open, ExpenseService.java

Next, we need to provide implementation, to save method by overriding inside the ExpenseServiceImpl.java class

Open, ExpenseServiceImpl.java

Now, we have created a service method to save expense objects, next all we need to do is, call this service method from the ExpenseController.java. let’s do that…

Open, ExpenseController.java

Alright, now we have a rest endpoint to save the expense. let’s test this endpoint through postman.




Alright, out rest endpoint is working as we expected. Now let’s move on to the front end part where we will make an HTTP POST request to this rest endpoint. let’s begin…

Open, expense.service.ts

So, now we have created a service method to save expense details by making an HTTP POST request to the rest endpoint. Now let’s call this method inside the add.expense.component.ts file

Open, add.expense.component.ts

Alright, now we need to create button inside the list-expense.component.html to navigate to add-expense.component.html

Open, list-expense.component.html

Now, all we need to do is create a form inside add-expense.component.html to enter the expense details

Open, add-expense.component.html

So with this in place, if you run the application, you will get the following output –







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 *