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:

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