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

20804total visits,62visits 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 .

  • Madan Mohan Reddy Gangireddy

    There is some mistake in “user-create.component.ts” file …
    import {User} from “../User”;
    Above line should be as import {User} from “../user”;
    Because of this mistake i got below error …
    https://uploads.disquscdn.com/images/b22471a0d19606bcfaec08d8a1f25ec9bf70af150a6cbf4bd50449a7a5d0b599.jpg

  • eko nur hidayat

    Hello guys, Can you help me, How make CRUD for transaksion from two table

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