Getting Error While implementing jquery datatables in angular

I want to implement jquery datatbles in angular so that's why i added these packages: npm install angular-datatables,npm install jquery,npm install datatables.net, npm install datatables.net-dt But getting error like this

Error: node_modules/angular-datatables/src/angular-datatables.directive.d.ts:31:25

• error TS2503: Cannot find namespace 'DataTables'.

31 dtInstance: Promise<DataTables.Api>; ~~~~~~~~~~

Error: node_modules/angular-datatables/src/models/settings.d.ts:3:38 - error TS2503: Cannot find namespace 'DataTables'.

3 export interface ADTSettings extends DataTables.Settings { ~~~~~~~~~~

Error: node_modules/angular-datatables/src/models/settings.d.ts:6:37 - error TS2503: Cannot find namespace 'DataTables'.

6 export interface ADTColumns extends DataTables.ColumnSettings { ~~~~~~~~~~

× Failed to compile.
​

This is my component.html code:

<section class="content">
<div class="content-block">
<div class="block-header" *ngFor="let breadscrum of breadscrums">
<!-- breadcrumb -->
<app-breadcrumb [title]="breadscrum.title" [items]="breadscrum.items" [active_item]="breadscrum.active">
</app-breadcrumb>
</div>
<div class="row clearfix">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="card">
<div class="header">
<h2>Angular Data Tables</h2>
</div>
<div class="body">

<!-- Add content here -->
<table>
<thead>
<th>Code</th>
<th>Product</th>
<th>Amount</th>
<th>Type</th>
<th>IsActive</th>
</thead>
<tbody>
@for(item of productlist;track item){
<tr>
<td>{{item.code}}</td>
<td>{{item.product}}</td>
<td>{{item.amount}}</td>
<td>{{item.type}}</td>
<td>{{item.isActive}}</td>
</tr>
}
</tbody>
</table>

</div>
</div>
</div>
</div>
</div>
</section>






This is my typescriptcode:

import { Component, OnInit } from '@angular/core';
import { Subject } from 'rxjs';
import { products} from '../../core/models/products'
import { MasterService } from '../../core/service/master.service';
import { DataTablesModule } from 'angular-datatables';
import { Config } from 'datatables.net';

@Component({
selector: 'app-angular-datatables',
templateUrl: './angular-datatables.component.html',
styleUrls: ['./angular-datatables.component.sass'],
//imports: [DataTablesModule]
})
export class AngularDatatablesComponent implements OnInit {
breadscrums = [
{
title: 'Tables',
items: ['Extra'],
active: 'Datatables',
},
];

productlist! : products[]
//dtoptions: Config={}
dtoptions: Config = {};
dttrigger:Subject<any>=new Subject<any>();

constructor(private service: MasterService) {}
ngOnInit() {
this.loadproducts();
}

loadproducts(){
this.service.Loadproducts().subscribe(item=>{
this.productlist=item;
this.dttrigger.next(null);
})
}

}


This is my angulat.json:

"assets": ["src/favicon.ico", "src/assets"],
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/@swimlane/ngx-datatable/index.css",
"./node_modules/@swimlane/ngx-datatable/themes/material.css",
"./node_modules/@swimlane/ngx-datatable/assets/icons.css",
"src/assets/scss/style.scss",
"src/assets/scss/theme/all-themes.scss",
"src/styles.scss",
"./node_modules/datatables.net-dt/css/dataTables.dataTables.min.css",
"./node_modules/datatables.net-dt/css/dataTables.dataTables.css"
],
"scripts": [
"./node_modules/moment/min/moment.min.js",
"./node_modules/chart.js/dist/Chart.bundle.js",
"./node_modules/apexcharts/dist/apexcharts.min.js",
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/datatables.net/js/dataTables.min.js"
],


Even I re install all the packages but not able to fix the issue

Continue reading...