Agfdhyk

I am working on the angular based project. I am using datatables to display data. When I try to do some delete some data from the table, I am unable to show the new data.

Following is my .html page:

    <table class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions"

            [dtTrigger]="dtTrigger">

            <thead>

                <tr>

                    <th>Book Name</th>

                    <th>Book Genres</th>

                    <th>Book Details</th>

                    <th style="width: 100px;">Action</th>

                </tr>

</thead>

    <tbody>

                <tr *ngFor="let book of books">

                    <td *ngIf="show >{{book.book_name}}</td>

                    <td *ngIf="show>{{book.book_genres}}</td>

                    <td *ngIf="show>{{book.book_details}}</td>

                    <td>

                        <button type="button" class="btn btn-default" (click)="deleteBook(book.book_id)" data-toggle="tooltip"

                            title="Delete"><span class="glyphicon glyphicon-trash"></span></button>

                    </td>

                    <td colspan="3" *ngIf="!show">

                        <div class="alert alert-secondary text-center">

                            <strong>{{showmessage}}</strong>

                        </div>

                    </td>

                </tr>

            </tbody>

        </table>

            </thead>

Following is my .ts file containing http calls:

ngOnInit() {

    this.dtOptions = {

      pagingType: 'full_numbers',

      retrieve: true,

      processing: true

    };





    this.httpbookservice.getBooks()

      .subscribe(

        res => {

          if (res.val.length) {

            this.books = res.val;

          } else {

            this.show = false;

          }

        }, err => {

          console.log("err:", err)

        }

      )



  ngAfterViewInit(): void {

    console.log("After View Init")

    this.dtTrigger.next();

  }



  deleteBook(id) {

    this.deleteID = id;

    this.httpbookservice.deleteBooks(this.deleteID)

      .subscribe(

        res => {

          this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {

            dtInstance.destroy();

            this.dtTrigger.next();

          });

          this.notifier.notify('success', 'Book Deleted!')

        }, err => {

          console.log("err:", err)

        }

      )

  }



  ngOnDestroy(): void {

    this.dtTrigger.unsubscribe();

  }

httpbookservice is a service file which makes http calls.
Following are the refrences used:

Ref

Ref1

Thanks in advance