Getting error in Angular 5 Datatables: cannot reinitialise DataTable

Question

I am working on the angular based project. I am using datatables to display data. When I try to do some modifications on the table, I get the following error.

DataTables warning: table id=DataTables_Table_0 - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

Answer 1

I think it is because you are using [dtTrigger]="dtTrigger" in Angular DataTables and rerendering the table on the same page. If you have this problem you should use the following trick to handle dtTrigger

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table">

Make sure you do not use this.dtTrigger.next() on ngOnInit()

ngAfterViewInit(): void {
    this.dtTrigger.next();
}

Rerender it when you use the second time

rerender(): void {
  this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
     dtInstance.destroy();
     this.dtTrigger.next();     
  });
}

Answer 2

I solved this problem by removing the following code in *.ts file:

dtOptions: DataTables.Settings = {};
 this.dtOptions = {
};