> For the complete documentation index, see [llms.txt](https://smu-portal.gitbook.io/get-started/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://smu-portal.gitbook.io/get-started/book-module-tutorial/frontend/delete-a-book/delete-book-update-component.md).

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

{% tabs %}
{% tab title="list-books.component.html" %}

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

```

{% endtab %}
{% endtabs %}

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`](https://angular.io/guide/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,

{% tabs %}
{% tab title="list-books.component.html" %}

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

{% endtab %}
{% endtabs %}

If you look closely, you will notice that the message has an `if`directive, 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.

{% tabs %}
{% tab title="list-books.component.ts" %}

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

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

{% endtab %}
{% endtabs %}

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.