im new to angular and I cant seem to get my datatable working properly. Any help would be greatly appreciated!
This is what i'm currently getting - it just says No data available in table and i cant get the sorting or search to work either
component.html
<table datatable [dtOptions]="dtOptions" datatable="ng" class="row-border hover table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Company</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let client of clients">
<td>{{ client?.clientName }}</td>
<td>{{ client?.clientCompany }}</td>
<td>{{ client?.clientEmail }}</td>
<td>
<button class="solid">Edit</button>
<button class="danger">Delete</button>
</td>
</tr>
</tbody>
</table>
component.ts
dtOptions: DataTables.Settings = {};
clients: any = [];
dtTrigger: Subject<any> = new Subject<any>();
constructor(
public webService: WebService,
private renderer: Renderer2,
private router: Router,
private httpClient: HttpClient
) { }
ngOnInit(): void {
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 2
};
this.webService.getClients()
.subscribe(data => {
this.clients = data;
console.log(this.clients)
// Calling the DT trigger to manually render the table
this.dtTrigger.next;
});
}
ngOnDestroy(): void {
// Do not forget to unsubscribe the event
this.dtTrigger.unsubscribe();
}
example data used
