Datatable not loading

duca

I am using Angular 13 and these are the packages

@types/datatables.net@1.10.21
+-- @types/jasmine@3.10.18
+-- @types/jquery@3.5.29
+-- @types/node@12.20.55
+-- angular-datatables@13.1.0
+-- datatables.net-dt@1.13.11
+-- datatables.net@1.13.11

In the component ts

@ViewChild(DataTableDirective, { static: false }) dtElement!: DataTableDirective;

dtOptions: DataTables.Settings = {};

dtTrigger: Subject<any> = new Subject();

this.dtOptions = {
ajax: (_dParams, callback) => {
callback({
data: this.subCategories
});
},
columns: [
{
title: 'Id',
data: 'subCategoryId'
},
{
title: 'Sub-Category name',
data: 'subCategoryName'
}
]
};

reloadTable() {
this.dtElement.dtInstance.then(dtInstance => {

   dtInstance.destroy();

   this.dtTrigger.next(null);

})
}

ngAfterViewInit() {
this.dtTrigger.next(null);

}

ngOnDestroy() {
this.dtTrigger.unsubscribe();
}

There are no console errors but the datatables is just not there i cannot see it in the dev tools but if i setTimeout on reloadTable and call it in ngAfterViewInit the table will be there but i will get Cannot read properties of undefined (reading 'dtInstance')

allan

I haven't used Angular DataTables, so I think you might need to ask a that projects support channels.

I would suggest you create a test case to show them.

Allan