Rerender doesn't work !

:globe_with_meridians: Your Environment

NodeJS version: 14.17.0
Angular version: 10.0.8
Angular CLI version: 10.0.5
jQuery version: ^3.6.0
DataTables version: ^1.11.3
angular-datatables version: ^9.1.1

:memo: Additional context

MY CODE

`export class CompaniesComponent implements AfterViewInit, OnDestroy, OnInit { @ViewChild(DataTableDirective, { static: false }) dtElement: DataTableDirective; dtOptions: DataTables.Settings = {}; companies: any = []; data; dtTrigger: Subject = new Subject(); userData;

constructor( private apollo: Apollo, public dialog: MatDialog, private router: Router, private chRef: ChangeDetectorRef ) { this.userData = JSON.parse(localStorage.getItem('USER')); this.getData(); }

ngOnInit() { this.dtOptions = { pagingType: 'full_numbers', pageLength: 10, lengthMenu: [5, 10, 25, 50, 100], retrieve: true, destroy: true, }; } ngAfterViewInit() { this.dtTrigger.next(); } getData() { this.apollo .watchQuery({ query: gql { companies(where:{ creator: { id: "${this.userData.id}" } }) { id name address city country createdAt creator { email } } } , }) .valueChanges.subscribe((result: any) => { this.companies = result?.data && result?.data?.companies; this.rerender(); }); } view(d) { console.log(d); } openDialog() { const dialogRef = this.dialog.open(AddComponent, { height: '400px', width: '600px', });

dialogRef.afterClosed().subscribe((result) => {
  const data = result;
  if (data === 'ADDED!') {
    this.getData();
  }
});

} rerender() { if (!this.dtElement || !this.dtElement.dtInstance) { this.dtTrigger.next(); return; } this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => { dtInstance.destroy(); this.dtTrigger.next(); }); // const table = $('#dtTable').DataTable(); // table.destroy(); } ngOnDestroy(): void { // Do not forget to unsubscribe the event this.dtTrigger.unsubscribe(); } }` I read from https://l-lin.github.io/angular-datatables/#/advanced/rerender

It doesn't refresh data at all!

Any suggestions?

l-lin / angular-datatables