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.service.ts

 

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

user-list.component.html

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 UserController.java

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

14426total visits,33visits today

  • Artem Lisiikh

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

RSS
Follow by Email
Facebook
Facebook
Google+
http://mydevgeek.com/angular-4-crud-application-with-spring-boot-rest-service-part-2
Twitter