component using angular datatable and dttrigger when switch between components it gives error of ObjectUnsubscribedError because of dttriggers.next()

rerender(): void {
        this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
          // Destroy the table first
          dtInstance.destroy();
          // Call the dtTriggers to rerender again
         this.dtTriggers.next();
        });
}

ngOnDestroy(){
        console.log("dashboard destroy is called");
        this.dtTriggers.unsubscribe();
}

[Sir-J]

Maybe need to create a component and in component use your directive? ngIf = false hide the component and destroy DOM. ngIf = true reinitialize the component and create new DOM. The component creates new dtTrigger.

[alwinaugustin]

Unfortunately, when using ngIf, it destroys completely the DOM, so the dtTrigger is also destroyed, thus the error. One way to hide/show the table is to use the hidden property instead. Check this example. I do not have any other solution 😕

I tried to use the [hidden], but it is showing me error

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