Skip to main content

Angular 4 CRUD application with Spring Boot REST service – Part 2

Angular 4

The previous tutorial we covered the REST service implementation and angular component generation. You can find here the previous one. In this tutorial, we are going to cover implementing CRUD operation and integrate with the REST service.

Part 1 – Angular 4 CRUD application with Spring Boot REST service

1) Styling

First of all, we will add the bootstrap 4 into the project. Go to the user-appdirectory and run following command.

npm install --save bootstrap font-awesome

Then open the open the styles.css (user-app/src/styles.css) and add these style imports.

2) Showing User details

Now, we are going to show all user details in the table. So that, we need a user class as a model. Create a User.ts inside the user module.

Next step is, integrate with the REST service. This user service is included findAll(), findById(), saveUser(), updateUser() and deleteUserById() REST calls. At this moment, we will implement only the findAll() functionality.



user-list.component.ts – responsible to call service and get all user details.


Then add the HttpModule into the app.module.ts.

Now, you can run the REST service then run the user-app usingng serve.

Now, you have noticed the app got some error. Problem is, REST service running on localhost:8080 and the user-app running on the localhost:4200. So that, the REST service and app could not communicate each other.

If you are interested, check this about CROS enabling in Spring.

For enabling CORS, we add the following line into the

Then, restart the service and check the app.

Angular user app

3) Create, Edit and Delete

Add a new button for creating a new user. Add edit and delete button for each user. Do modify user-list.component.html.

Then change the user-list.component.ts for creating, editing and deleting as followings.

Angular user app

Run and check the user interface and functionality. Next tutorial will be implemented create, edit and delete functions.

Download source code – GitHub

Related Post

22327total visits,60visits today

  • Artem Lisiikh

    This is the exact tutorial I’ve been searching for, thank you =)

  • ETA on next tutorial? Thank you for all your tutorials!

  • Adam H

    When trying to load the user data, it fails with a Chrome console output of net::ERR_CONNECTION_REFUSED
    Any suggestions?

    • Truyen Vu

      run the springboot class:

  • Daniel Matos

    Anyone having problems with the “import { User } from “./user”; on user-listcomponents.ts ?

    • Leonardo Isaias Meza Nuñez

      change user for User, linux is case sensitive

      • Daniel Matos

        Thanks for the help !

        • Leonardo Isaias Meza Nuñez

          you welcome : )

  • Jeff Keihl

    Thank you for the tutorial

  • Jayaprakash Ch

    Hi, Can you edit “Create a User.ts inside the user module” to Create a user.ts inside the user module”
    because in user-list.component.ts you are trying to include “user” Object

  • BlaCk HoLe

    does someone of you guys find this error ::
    Property ‘findAll’ does not exist on type ‘UserService’.

Follow by Email