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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://smu-portal.gitbook.io/get-started/book-module-tutorial/frontend/delete-a-book/delete-book-update-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.