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

I'm working on an Angular 17 application using Angular-Datatables, and I'm having trouble re-rendering the DataTable when updating the data after a search. Below is the relevant code for my component:

HTML template:

<div class="search-container">
<input type="text" [(ngModel)]="searchTerm" placeholder="Search by title" />
<button (click)="searchPosts()">Search</button>
</div>

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Body</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let post of posts">
<td>{{ post.id }}</td>
<td>{{ post.title }}</td>
<td>{{ post.body }}</td>
</tr>
</tbody>
</table>



Component code:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subject } from 'rxjs';

@Component({
selector: 'app-data-table',
templateUrl: './data-table.component.html',
styleUrls: ['./data-table.component.css']
})
export class DataTableComponent implements OnInit, OnDestroy {
dtOptions: DataTables.Settings = {};
dtTrigger: Subject<any> = new Subject<any>();
posts: any[] = [];
searchTerm: string = '';

constructor(private http: HttpClient) {}

ngOnInit(): void {
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 10,
destroy: true
};

// Fetch initial data
this.fetchData();
}

fetchData(): void {
this.http.get('https://jsonplaceholder.typicode.com/posts')
.subscribe((posts: any[]) => {
this.posts = posts;
this.dtTrigger.next(null);
});
}

searchPosts(): void {
if (this.searchTerm.trim() === '') {
this.fetchData(); // If search term is empty, fetch all data
} else {
this.http.get(`https://jsonplaceholder.typicode.com/posts?title_like=${this.searchTerm}`)
.subscribe((posts: any[]) => {
this.posts = posts;
this.dtTrigger.next(null); // Re-render the DataTable
});
}
}

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



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.

Doc link: https://l-lin.github.io/angular-datatables/#/basic/with-ajax

I also attempted to implement a rerender method like this:

rerender() {
this.dtElement.dtInstance.then(dtInstance => {
dtInstance.destroy();
this.dtTrigger.next(null);
});
}


Note: I am using Angular 17 and the latest version of Angular-Datatables. Any help or suggestions would be greatly appreciated!

Continue reading...