Update Component

We will now update the ListBooksComponent , so that we allow the user to actually delete books from the list. What we will do first is to add some changes to the template (i.e. the HTML file) of the component and then we will modify the component's TypeScript class.

Basically, what we want to achieve is to display a red button labeled "Delete" , when clicked, will remove the row from the table and display a message confirming that indeed the book has been removed.

Updating the Template

Go to list-books.component.html and modify it as follow,

list-books.component.html

<ng-container *ngFor="let book of listOfBooks | async; let i = index;">
  <tr>
      <th scope="row">{{i}}</th>
      <td>{{book.Title}}</td>
      <td>{{book.Author}}</td>
      <td>{{book.ISBN}}</td>
      <td>
      <button type="button" class="btn btn-danger" 
      (click)="deleteBook(book.ISBN)">Delete</button>
      </td>
  </tr>
</ng-container>

What we have done is that we have simply created a button inside the for loop (so that it is created at each row) and we have bound a function deleteBook()that takes the book's ISBN as a parameter to the click event (if you want to read more about Event Binding in Angular). What will happen, is that if the user clicks on the button, that function will be triggered.

What remains now is to add the confirmation message once the user has deleted the book. Go to the top of the file add the following code block,

list-books.component.html

<ng-container *ngIf="this.bookRemoved | async">
  <div class="alert alert-success alert-dismissible fade show" role="alert">
    The Book Has Been Successfully Removed.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
</ng-container>

If you look closely, you will notice that the message has an ifdirective, and this makes perfect sens since we do not want the message to be always displayed, rather, it should be visible only after deleting, so its status would depend on the value of bookRemoved (which is a boolean variable).

Updating the Class (the Logic)

The last step is to define the functions and variables (deleteBook() and bookRemoved) in the component's logic.

list-books.component.ts

// ...
export class ListBooksComponent implements OnInit,OnDestroy{

  bookRemoved: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
// ...
  deleteBook(bookISBN: string) {
    this.bmsService.deleteBook(bookISBN);
    this.bookRemoved.next(true);
    
  }
}

What the deleteBook() is actually doing, is calling the previous method that we have implemented in the Book Management System's Service that is responsible for deleting books from the list and database , and then we are changing the state of bookRemoved to true so that the confirmation message is displayed.