1 of 4

Delete a Book

In this section, we will add the last feature of the BMS, which is book deletion. As we have done in earlier parts, we will need to modify the module's service, templates and components.

Update Service

We start by defining two functions in the BMS service, deleteBookand deleteBookByID:

deleteBook is responsible for communicating with the API endpoint. We pass to it the book's ISBN as a parameter and the latter will be used as the endpoint's parameter to delete the book from the database.
deleteBookByID will delete the book from the local list that we have created so that we avoid fetching the list again and provide a better UX.

import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { Observable, BehaviorSubject, of } from 'rxjs';
import {Book} from '../models/book.model'

@Injectable({
  providedIn: 'root'
})
export class BmsService {
  // ...
  deleteBook(bookISBN: string): void {
     this.httpClient.delete<any>(`http://localhost:3000/api/user/deleteBook/${bookISBN}`).subscribe({
      next: (data: any) => {
        console.log(data);
        this.deleteBookByID(bookISBN);
      },
      error: (data: any) => console.log(data)

    })
  }
  
  private deleteBookByID(bookISBN: string) {
    const books: Book[] = this.listOfBooks.getValue();
    books.forEach((book, index) => {
      if(book.ISBN === bookISBN) {books.splice(index, 1);}
    })
    this.listOfBooks.next(books);
  }
  
}

In deleteBook we are using the HTTP Client to make a DELETE HTTP request to the backend server through the API endpoint. Note that we are not specifying the response's type (unlike what we did when fetching the list of books), that is why the function's call type parameter is set to any.

Once the request has been successfully made, we log the response to the console at line 14 (though this is an optional step, we are just doing so as a sanity check), then we invoke deleteBookByIDto delete the book from the local list.

Caution: Again, in an ideal setting you should properly handle errors by displaying them to your user so they would be aware if the system is not acting properly.

Coming to the deleteBookByIDfunction, we first create an auxiliary variable of type Book[] where we store the subject's current value and we operate on that variable. We iterate over the array to find the book with that specific ID. Once found, we delete it from the array using the method splice, that takes the starting index and the number of elements to be deleted (in the case it is just 1). Finally, we broadcast our new list to the subject.

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,

<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,

<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.

// ...
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.

Final Code Review

By now, ListBooksComponent files and BMS service should be look like this,

import { Component, OnInit, OnDestroy} from '@angular/core';
import {BmsService} from "@app/shared/services"
import { Book } from "@app/shared/models";
import { BehaviorSubject, Observable } from 'rxjs';
import { Router } from '@angular/router';


@Component({
  selector: 'app-list-books',
  templateUrl: './list-books.component.html',
  styleUrls: ['./list-books.component.css']
})
export class ListBooksComponent implements OnInit,OnDestroy{

  listOfBooks: BehaviorSubject<Book[]> = new BehaviorSubject<Book[]>([]);
  // Second
  bookRemoved: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

  constructor(public bmsService: BmsService, private router: Router) { }

  ngOnInit() {
   this.bmsService.getList().subscribe(books => this.listOfBooks.next(books));
  }

  ngOnDestroy() {
  }

  deleteBook(bookISBN: string) {
    this.bmsService.deleteBook(bookISBN);
    this.bookRemoved.next(true);
    
  }

  goToAdd() {
    this.router.navigate(["/apps/bms/add"])
  }

}

<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>

<div class="table-responsive">
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th scope="col">#</th>
        <th scope="col">Title</th>
        <th scope="col">Author</th>
        <th scope="col">ISBN</th>
        <th scope="col">Action</th>
      </tr>
    </thead>
    <tbody>
      <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>
    </tbody>
  </table>
  <div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-success" 
    (click)="goToAdd()">Add Book</button>
  </div>

</div>

import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { Observable, BehaviorSubject, of } from 'rxjs';
import {Book} from '../models/book.model'



@Injectable({
  providedIn: 'root'
})
export class BmsService {

  constructor(private httpClient: HttpClient) { }

  listOfBooks: BehaviorSubject<Book[]> = new BehaviorSubject<Book[]>([]);

  getBooks(): void {
   this.httpClient.get<Book[]>("http://localhost:3000/api/user/getBooks").subscribe({
    next: (data: Book[]) => this.listOfBooks.next(data),
    error: (data: any) => console.log(data)

  })
  }

  getList(): Observable<Book[]> {
    if(of(this.listOfBooks)) {
      this.getBooks();
    }
    return this.listOfBooks.asObservable();
  }

  deleteBook(bookISBN: string): void {
     this.httpClient.delete<any>(`http://localhost:3000/api/user/deleteBook/${bookISBN}`).subscribe({
      next: (data: any) => {
        console.log(data);
        this.deleteBookByID(bookISBN);
      },
      error: (data: any) => console.log(data)

    })
  }

  addBook(book: Book): void {
     this.httpClient.post<any>("http://localhost:3000/api/user/addBook", book).subscribe({
       next: (data: any) => {
        this.addNewBook(book);
        console.log(data);
       },
       error: (data: any) => console.warn(data)

     })
  }

  private deleteBookByID(bookISBN: string) {
    const books: Book[] = this.listOfBooks.getValue();
    books.forEach((book, index) => {
      if(book.ISBN === bookISBN) {books.splice(index, 1);}
    })
    this.listOfBooks.next(books);
  }

  private addNewBook(book: Book) {
    const books: Book[] = this.listOfBooks.getValue();
    books.push(book);
    this.listOfBooks.next(books);
  }
}