Skip to main content
Angular 4

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

Angular 4

This is the last part of Angular 4 and Spring Boot application build tutorial series.

Part 1 – Spring Boot REST service and setup Angular app

Part 2 – Integrate with the REST service

Today, we’re going to create, update and delete functionalities.

1) Create User

First thing is, implement the user service for saving a new user.

user.service.ts

Next thing is, import these modules into the users.module.ts.

Then add these html into the user-create.component.ts.

Finally, changes the user-create.component.ts as following.

 

2) Update User

For updating, we are going to use the same form which used for creating a new user. For updating the user, we need to 2 api calls. First one is getUserById() and updateUser(). These are already implemented in the REST service.

Modify the user.service.ts.

Changed the user-create.component.ts.

3) Delete User

Once again, modified the user.service.ts.

And implement the deleteUser() in user-list.component.ts.

4) Run it

Now, run it using ng serve command

user-list view

user-create view

Clone it : – GitHub


Related Post

17042total visits,26visits today

  • Yuriy Tkachenko

    Damith, thank you again for great tutorials. It would also be very interesting to see tutorials about secure services (with HTTPS, JWT authentication, etc).

    • mydevgeek

      Thank u, I’ll try to do that

  • Waqas Rana

    nice tutorial , simple and straight , thanks . please also make tutorial spring security with angular 4 , (single page application). thanks .

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