April 16, 2021
CRUD Operations with Angular - Part 6

Complete CRUD Operation With Angular 9 Step by Step – PART 6

This is Part 6 of our CRUD with Angular and Spring Boot tutorial. In this part we would submit and edited record. The we also handle Delete.

We cover the follow 4 topics;

  1. Check the API EndPoint
  2. Code the Submit Function
  3. HTTP DELETE Operation
  4. A Brief Review

 

1. Check the API Endpoint

We would have to go to the Spring Boot API  to check the controller endpoint. This is how is goes. The Id of  the edited record would be in the URL while the edited record would be in the body of the request.

See the function below:

@PutMapping("/friends/{id}/edit")
public void editFriend(@PathVariable("id") Integer id, @RequestBody Friend friend) {
    friendService.save(friend);
}

So the request url for edit would be http://localhost:8888/friends/{id}/edit

 

2. Code the Submit Function

Now back to Angular and TypeScript! First we add the event to the Save button in the edit modal. Then we write the method.

Step 1: Put the click event on the Save button on the edit modal

(click)="onSave()" 

Step 2: Now write the onSave() method as shown below:

onSave() {
  const editURL = 'http://localhost:8888/friends/' + this.editForm.value.id + '/edit';
  console.log(this.editForm.value);
  this.httpClient.put(editURL, this.editForm.value)
    .subscribe((results) => {
      this.ngOnInit();
      this.modalService.dismissAll();
    });
}

See in the above code that the editURL correspond to the pattern specified in the API. The code this.editForm.value contains the edited values of the form. So, it’s quite easy. Hence, I’m not making any further explanation. Let’s move to the DELETE operation

 

3. HTTP DELETE Operation

When the user clicks on Delete, you’ll just display a Confirm Delete popup. Take the steps below:

Step 1: Copy one of modal templates and just remove the form from the body. For me, I copied the contentDetails modal. Put the text “Are you sure you want to delete this record?“.

<ng-template #contentDelete let-modal>
  <div class="modal-header">
    <h4 class="modal-title">Confirm Delete</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <h2>Are you sure you want to delete this record.</h2>
    <div class="border text-center"> 
      <button data-dismiss="modal" class="btn btn-danger">Yes, Delete!</button> 
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Cancel</button>
  </div>
</ng-template>

Step 2: Add the click event to the Delete button in the html table. Like so:

(click)="openDelete(contentDelete, friend)"

Step 3: Write the openDelete method. Simply copy the openDetails method and modify it. This is what I did below:

openDelete(targetModal, friend: Friend) {
  deleteId = friend.id;
  this.modalService.open(targetModal, {
    backdrop: 'static',
    size: 'lg'
  });
}

Note that you also need to create a deleteID field for the FriendComponent

At this point, you can launch the application. If you click on the delete button, this is what you will see:

Confirm Delete Modal
Confirm Delete Modal

However, when you click “Yes, Delete“, nothing happens. So take the further steps below:

Step 4: Add the  click event to the confirm delete button like so:

(click)="onDelete()"

Step 5: Finally add the onDelete() method

onDelete() {
  const deleteURL = 'http://localhost:8888/friends/' + this.deleteID + '/delete';
  this.httpClient.delete(deleteURL)
    .subscribe((results) => {
      this.ngOnInit();
      this.modalService.dismissAll();
    });
}

Meanwhile, the delete endpoint in the API is given below:

@DeleteMapping("/friends/{id}/delete")
public void deleteFriend(@PathVariable("id") Integer id){
    friendService.delete(id);
}

So at this point we are done! And I’ll say  big congrats to you! But let do a brief review

 

4. Brief Review

In CRUD with Angular and Spring Boot series, we cover the following 6-part series

Part 1 – Setup of Spring Boot API, setup of Angular 9 Application, installation of libraries(Bootstrap, Font-Awesome, NgBootstrap, Angular Material), adding Angular Route, templates and Home component

Part 2 – In this part, we fetched data from the API and displayed on a HTML table. We also added some control buttons.

Part 3 – Making a HTTP POST request to submit a net record

Part 4 – Here we were able to display selected record in a details modal form.

Part 5 – We worked on displaying an edit form and filling the controls with selected row data.

Part 6 – Worked on submitting an edited record. Then we completed and tested making a HTTP DELETE request

0 0 vote
Article Rating
Subscribe
Notify of
guest
4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Ani Gho
Ani Gho
8 months ago

Hey,
i completed the e2e its fantastic well planned, well broken down into segment very nice approach one of the best i have seen… just what you need to brush anything here angular [had been there before 5 years before]with spring boot [ i am backend developer so not new to me ]one of the best tutorial on you tube has real meat and stuff not just spiced up sitting in a jazzy room with all the decor and no meat 🙂 some videos i have watched…:( . You have great patience to do a video and a tutorial which is just amazing… not an easy task not for me coz when i am on job i am under the pump and the family ….having said that only 1 point in real apps we don’t use verbs all your url could be just students[noun]as;
so this is your controller i have modified…
@RestController
@CrossOrigin
public class FriendC {

@Autowired
private FriendS friendS;

@GetMapping(“/friends”)
public List getFriends() {
return friendS.getFriends();
}

@PostMapping(“/friends”)
public void addFriend(@RequestBody Friend friend) {
friendS.addFriend(friend);

}

@PutMapping(“/friends/{id}”)
public void updateFriend(@PathVariable(“id”) Integer id, @RequestBody Friend friend) {
friendS.updateFriend(friend);
}

@DeleteMapping(“/friends/{id}”)
public void deleteFriend(@PathVariable(“id”) Integer id) {
friendS.deleteFriend(id);
}
}

trackback

[…]  Part 6 – Delete Operation […]