Angular Datatable | facing error while getting data from API (using nodejs) - node.js

Question

When we add static data in angular datatable all things work fine, but when we load the data table from an API, the pagination, search, and sorting don't work. And it show's "No data available in table", but data is present in the table, also attaching the images.
Click me to view img
Here is the HTML Code
<table datatable [dtOptions]="dtOptions" class="datatable-init nowrap nk-tb-list nk-tb-ulist">
<thead>
<tr class="nk-tb-item nk-tb-head">
<th class="nk-tb-col nk-tb-col-check">
<div class="custom-control custom-control-sm custom-checkbox notext">
<input type="checkbox" class="custom-control-input" id="uid" />
<label class="custom-control-label" for="uid"></label>
</div>
</th>
<th class="nk-tb-col"><span class="sub-text">Customer Name</span></th>
<th class="nk-tb-col tb-col-mb">
<span class="sub-text">Phone Number</span>
</th>
<th class="nk-tb-col tb-col-md">
<span class="sub-text">CNIC</span>
</th>
<th class="nk-tb-col tb-col-lg">
<span class="sub-text">Joining Date</span>
</th>
<th class="nk-tb-col tb-col-lg">
<span class="sub-text">Expiry Date</span>
</th>
<th class="nk-tb-col tb-col-lg">
<span class="sub-text">Status</span>
</th>
<th class="nk-tb-col nk-tb-col-tools text-end"></th>
</tr>
</thead>
<tbody >
<tr class="nk-tb-item" *ngFor="let user of allUsers">
<td class="nk-tb-col nk-tb-col-check">
<div class="custom-control custom-control-sm custom-checkbox notext">
<input type="checkbox" class="custom-control-input" id="uid1" />
<label class="custom-control-label" for="uid1"></label>
</div>
</td>
<td class="nk-tb-col">
<span>{{user.customerName}}</span>
</td>
<td class="nk-tb-col tb-col-md">
<span>{{user.phoneNumber}}</span>
</td>
<td class="nk-tb-col tb-col-lg">
<span>{{user.CNIC_Number}}</span>
</td>
<td class="nk-tb-col tb-col-lg">
<span class="badge bg-secondary">{{user.Joining_Date}}</span>
</td>
<td class="nk-tb-col tb-col-md">
<span class="badge bg-danger">{{user.Expiry_Date}}</span>
</td>
<td class="nk-tb-col tb-col-md">
<span class="badge bg-success">Active</span>
</td>
<td class="nk-tb-col nk-tb-col-tools">
<ul class="nk-tb-actions gx-1">
<li>
<div class="drodown">
<a href="#" class="dropdown-toggle btn btn-icon btn-trigger" data-bs-toggle="dropdown"><em
class="icon ni ni-more-h"></em></a>
<div class="dropdown-menu dropdown-menu-end">
<ul class="link-list-opt no-bdr">
<li>
<a data-bs-toggle="modal" href="#mViewDetails"><em
class="icon ni ni-eye"></em><span>View
Details</span></a>
</li>
<li>
<a data-bs-toggle="modal" href="#mEditDetails"><em
class="icon ni ni-edit"></em><span>Edit
Details</span></a>
</li>
<li>
<a class="cursor" (click)="Toast.sendReminder()"><em
class="icon ni ni-send"></em><span>Send
Reminder</span></a>
</li>
<li>
<a data-bs-toggle="modal" href="#mChangeStatus"><em
class="icon ni ni-exchange"></em><span>Change Status</span></a>
</li>
<li>
<a href=""><em
class="icon ni ni-delete"></em><span>Delete
User</span></a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</td>
</tr>
<!-- .nk-tb-item -->
</tbody>
</table>
Here is the TS Code
import { Component, OnInit } from '#angular/core';
import { Subject } from 'rxjs';
import { ToastService } from 'src/app/services/toast.service';
import { IDropdownSettings } from 'ng-multiselect-dropdown';
import { UserDetailService } from '../../services/user-detail.service';
import { Inter } from '../../inter';
import { HttpClient } from '#angular/common/http';
#Component({
selector: 'app-view-user',
templateUrl: './view-user.component.html',
styleUrls: ['./view-user.component.css']
})
export class ViewUserComponent implements OnInit {
constructor(public Toast: ToastService,
private userDetails: UserDetailService, private http: HttpClient) {
}
dtOptions: DataTables.Settings = {};
dtTrigger: Subject<any> = new Subject<any>();
dropdownList: any = [];
selectedItems = [];
allUsers: Inter[] = [];
dropdownSettings: IDropdownSettings = {
singleSelection: false,
idField: 'item_id',
textField: 'item_text',
selectAllText: 'Select All',
unSelectAllText: 'UnSelect All',
itemsShowLimit: 3,
allowSearchFilter: true
};
dataForTable: any;
fetch() {
this.http.get<any>('http://localhost:3000/user').subscribe(data => {
this.dataForTable = data;
console.log(this.dataForTable);
})
}
ngOnInit(): void {
this.dtOptions = {
pagingType: 'full_numbers',
language: {
searchPlaceholder: "Type Into Search"
}
};
this.fetch();
this.dropdownList = [
{ item_id: 1, item_text: 'Naan Shami' },
{ item_id: 2, item_text: 'Chicken Manchurian' },
{ item_id: 3, item_text: 'Pune' },
{ item_id: 4, item_text: 'Navsari' },
{ item_id: 5, item_text: 'New Delhi' }
];
this.get()
}
get() {
this.userDetails.get().subscribe((data) => {
this.allUsers = data;
});
}
delete(id: number) {
this.userDetails.delete(id).subscribe((data) => {
this.allUsers = this.allUsers.filter((_) => _.id !== id);
});
}
}
Here is the users.module.ts Code
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { UsersRoutingModule } from './users-routing.module';
import { AddUserComponent } from './components/add-user/add-user.component';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { ViewUserComponent } from './components/view-user/view-user.component';
import { DataTablesModule } from 'angular-datatables';
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
import { HttpClientModule } from '#angular/common/http';
#NgModule({
declarations: [
AddUserComponent,
ViewUserComponent
],
imports: [
CommonModule,
UsersRoutingModule,
NgbModule,
FormsModule,
ReactiveFormsModule,
DataTablesModule,
HttpClientModule,
NgMultiSelectDropDownModule.forRoot(),
]
})
export class UsersModule { }

Answer 1

Please add the following.
this.dtTrigger.next();
It will update the rows in the table.
your component, declare the following
#ViewChild(DataTableDirective)
dtElement: DataTableDirective;
dtOptions: DataTables.Settings = {};
dtTrigger: Subject<any> = new Subject();
after you pull your data from the service
this.serviceName.getData().subscribe((data) => {
// ADD THIS
this.dtTrigger.next();
}, (err) => {
})
For more please refer to the answer.