Angular.json
Please add below item in Angular.Json
"styles": [
"src/styles.scss",
"node_modules/datatables.net-dt/css/jquery.dataTables.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net/js/jquery.dataTables.js",
"node_modules/bootstrap/dist/js/bootstrap.js"
]
Use Below Plugin
npm i datatables
npm install jquery --save
npm install @types/datatables.net --save-dev
npm install @types/jquery --save-dev
npm install angular-datatables@6.0.0 --save
npm install datatables.net-dt --save
npm install datatables.net --save
Table In html
<table datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions" class="table">
<thead>
<tr>
<th>No.</th>
<th>Update Date</th>
<th>Logo Image</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let logo of Logolist">
<td>{{logo.logoID}}</td>
<td>{{logo.modifiedDate|date:'dd-MM-yyyy'}}</td>
<td><img src="https://ondc.org/image/logo.png"></td>
<td>
<a href="/"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
<a href="/"><i class="fa fa-trash-o" aria-hidden="true"></i></a>
</td>
</tr>
</tbody>
</table>
Module be like
import { DataTablesModule } from 'angular-datatables';
imports: [
DataTablesModule,
...
]
Component.ts
@ViewChild(DataTableDirective) public datatableElement!: DataTableDirective;
dtOptions: DataTables.Settings = {};
dtTrigger: Subject<any> = new Subject();
ngOnDestroy(): void {
this.dtTrigger.unsubscribe();
}
ngAfterViewInit(): void {
this.dtTrigger.next(this.dtOptions);
this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
});
}
ngOnInit(): void {
this.GetLogoList();
this.Afterview();
}
Afterview(){
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 2,
processing: true,
order: [[0, 'desc']],
lengthMenu: [5, 10, 25]
};
}
GetLogoList(){
const route = ApiUrl.Admin.Logo.GetLogoList;
this.httpService.get(route).subscribe((dataRes:any) => {
this.Logolist=dataRes;
console.log(this.Logolist);
this.render();
});
}
render():void{
this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
dtInstance.destroy();
this.dtTrigger.next(this.dtOptions);
});
