Datatables not initializing after reload operation in angular 7 app - node.js

Question

i implemented the jquery.datatables in my Angular 7, i installed all the node modules and did the necessary configuration, and included the necessary files in the angular.json file, and it works perfectly after the first run, but when i refresh the page or component, or move from one link to another and come back to the products page, the data loads from the api successfully but the datatable refuses to initialize properly...
and i'm lost on what to do.
Products Controller
import { Component, OnInit, ViewChild } from '#angular/core';
import { Router } from '#angular/router';
import { AccountService } from 'src/app/services/account.service';
import { ProductsService } from 'src/app/services/products.service';
import { Observable, Subject } from 'rxjs';
import { Product } from '../../interfaces/product';
import { DataTableDirective } from 'angular-datatables';
#Component({
selector: 'app-products',
templateUrl: './products.component.html',
styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
product$ : Observable<Product[]>;
products : Product[] = [] ;
//angular-datatables options..
dtOptions: DataTables.Settings = {};
dtTrigger: Subject<any> = new Subject();
#ViewChild(DataTableDirective, {static:true}) dtElement: DataTableDirective;
constructor(
private productService:ProductsService
){}
ngOnInit(): void {
this.productService.getAllProducts().subscribe(rst => {
this.products = rst; //assign the value of the observable to the array...
this.dtTrigger.next();
this.dtOptions = {
pageLength : 5,
autoWidth : true,
pagingType : 'full_numbers',
order : [[ 0, 'desc']]
}
});
}
}
the Product.component.html file
this is the code with the binding expressions
<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-bordered row-border hover" style="width:100%">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Description</th>
<th>In Stock</th>
<th>Price( CAD) </th>
<th>Image</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let p of products" class="text-center">
<td>{{p.productId}}</td>
<td>{{p.name | uppercase}}</td>
<td>{{p.description}}</td>
<td>{{ (true == p.outOfStock)?'No':'Yes' }}</td>
<td>{{p.price | currency: 'CAD'}}</td>
<td> <img [src]="'/imgs/'+p.imageUrl" *ngIf="p.imageUrl" style="float:right" width="75" /> </td>
<td>
<div class="btn btn-group mt-2" role="group">
<button type="button" class="btn btn-success"><i class="fa fa-list"></i></button>
<button type="button" class="btn btn-primary"><i class="fa fa-pencil-square-o"></i></button>
<button type="button" class="btn btn-danger"><i class="fa fa-trash-o"></i></button>
</div>
</td>
</tr>
</tbody>
</table>
but on the first glance after logging in, everything works perfectly, but when i move go back to the page, only the data shows on the table shows after the ngFor loop, but the datatable refuses to initialize.. what do i do, and please whats my mistake..

Answer 1

You need to destroy datatable instance before triggering it again.
import { DataTableDirective } from 'angular-datatables';
dtElement: DataTableDirective;
isDtInitialized:boolean = false
this.products = rst;
if (this.isDtInitialized) {
this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
dtInstance.destroy();
this.dtTrigger.next();
});
} else {
this.isDtInitialized = true
this.dtTrigger.next();
}
Using this, for the first time it will go to the else block and trigger datatable directly. After that when you refresh, it will first destroy the datatable and then trigger.

Answer 2

Destroy the datatables instance before re-initializing. Make sure to also destroy the instance on destroy of the component using OnDestroy, like so:
public dt: DataTableDirective;
public isDtInit: boolean = false;
public dtInit(): void {
if (this.isDtInit) {
this.dt.dtInstance.then((dtInstance: DataTables.Api) => {
dtInstance.destroy();
this.dtTrigger.next();
});
} else this.isDtInit = true;
}
ngOnDestroy() {
this.dtInit();
}
Using this, for the first time it will go to the else block and trigger datatable directly. After that when you refresh, it will first destroy the datatable and then trigger.