Odtnhj

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