Upon adding
[dtTrigger] = "dtTrigger"[dtTrigger] = "dtTrigger"View Datatable with dtTrigger View Datatable without dtTrigger
I referred to the documentation provided by angular-datatable for installing the datatables. The relevant code is outlined below.
The angular component is as follows:
@Component({
selector: 'app-company-list',
templateUrl: './company-list.component.html',
styleUrls: ['./company-list.component.css'],
})
export class CompanyListComponent implements OnInit, OnDestroy {
// some code
dtOptions: any = {};
dtTrigger: Subject<any> = new Subject<any>();
ngOnInit(): void {
this.dtOptions = {
pagingType: 'simple_numbers',
pageLength: 25,
lengthChange: false,
responsive: true,
};
this.getCompanies();
// some code
getCompanies(): void {
this.companyService.getAllCompanies().subscribe({
next: (companies) => {
// code for fetching data
this.dtTrigger.next(null);
},
error: (response) => {
console.error(response);
},
});
}
// some code
ngOnDestroy(): void {
this.dtTrigger.unsubscribe();
}
The HTML file contains the following:
<table
class="table table-striped table-hover table-sm table-bordered"
*ngIf="companies && companies.length > 0"
datatable
[dtOptions]="dtOptions"
[dtTrigger]="dtTrigger"
>
\\ rest of the table
In my angular.json configuration:
\\ other code
"styles": [
"src/styles.css",
"node_modules/datatables.net-bs5/css/dataTables.bootstrap5.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/datatables.net/js/jquery.dataTables.min.js",
"node_modules/datatables.net-bs5/js/dataTables.bootstrap5.min.js"
]
The dependencies listed in package.json are as follows:
"dependencies": {
\\ other packages
"angular-datatables": "^14.0.0",
"datatables.net": "^1.11.3",
"datatables.net-bs5": "^1.11.3",
"jquery": "^3.7.0",
}
In app.module.ts file, make sure to import DataTablesModule as shown below:
\\ other imports
import { DataTablesModule } from 'angular-datatables';
@NgModule({
declarations: [
// components
],
imports: [
// Modules
DataTablesModule,
],
providers: [],
bootstrap: [AppComponent],
})