Angular Datatable not loading

[duca333]

I am using Angular 13 and these are the packages

@types/datatables](https://datatables.net/forums/profile/types%2Fdatatables)[email protected]
+-- @types/jasmine@3.10.18
+-- @types/jquery@3.5.29
+-- @types/node@12.20.55
+-- [email protected]
+-- [email protected]
+-- [email protected]

In the component ts

@ViewChild(DataTableDirective](https://datatables.net/forums/profile/ViewChild%28DataTableDirective), { static: false }) dtElement!: DataTableDirective;

dtOptions: DataTables.Settings = {};

dtTrigger: Subject = 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 => {

Plain text
1
2
3
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') but the table is shown and works as it should but the only thing that is not correct is that console error. this.subCategories comes from the service but if i make the call inside the ajax block it doesnt make any difference.