Angular 17 with Angular-Datatables: Unable to Re-render DataTable

[mehulk05]

Issue 'm working on an Angular 17 application using Angular-Datatables, and using custom search on which I make an API call to get the updated search results from api and I'm having trouble re-rendering the DataTable when after a search.

Problem: I am unable to re-render the DataTable with updated data when performing a search. I have checked the documentation and tried various approaches, including triggering the dtTrigger in ngAfterViewInit, but it didn’t work.

Stackover flow: https://stackoverflow.com/questions/78752773/angular-17-with-angular-datatables-unable-to-re-render-datatable

:microscope: Minimal Reproduction

Source code where issue is available https://github.com/mehulk05/angular-datatable https://stackoverflow.com/questions/78752773/angular-17-with-angular-datatables-unable-to-re-render-datatable

StackBlitz/GitHub Link: Sandbox link: https://codesandbox.io/p/sandbox/naughty-noyce-sv6326?file=%2Fsrc%2Fapp%2Fapp.component.ts%3A28%2C17

Step-by-step Instructions:

• Initialize datatable
• Add a custom search
• On search hit the API and set the data in variable and re initialize the datatable and boom it will start giving issues

:8ball: Expected behavior

• As soon as new data is received from API and when we re-initialze the datatable, it should show the updated data

A clear and concise description of what you expected to happen.

:camera: Screenshots

As you can see in above screenshot, the data coming from API have seven records but the datatable is always showing 0 records

• NodeJS version: 18
• Angular version: 17
• Angular CLI version: 17.3
• jQuery version: 3.6
• DataTables version: 2.0.3
• angular-datatables version: 17.1

[shanmukhateja]

This approach has been deprecated in favor of built-in support for TemplateRef and Pipe .

Please refer https://l-lin.github.io/angular-datatables/#/faq for more info.

Closing this issue.