angular-datatables not working, please help

osamaamrengineer

Greetings, I am trying to use angular-datatables but it's not working
I am trying for week with no solution and the data is a plain table with no options never
I ran this commands

npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev
npm install bootstrap --save

and linked the files in angular.json

"styles": [
"node_modules/datatables.net-dt/css/jquery.dataTables.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net/js/jquery.dataTables.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]

and I imported the modules in all the modules I have

import { DataTablesModule } from 'angular-datatables';

imports: [
DataTablesModule
]

the component ts

dtOptions: DataTables.Settings = {};
posts: any;

ngOnInit(): void {
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 5,
processing: true,
};

this.http
  .get('http://jsonplaceholder.typicode.com/posts')
  .subscribe((posts) => {
    this.posts = posts;
  });

}

the component html

h1 Angular 13 Datatables Example - Tutsmake.com /h1
table datatable [dtOptions]="dtOptions" class="row-border hover"
thead
tr
th ID /th
th Title /th
th Body /th
/tr
/thead
tbody
tr *ngFor="let post of posts"
td {{ post.id }} /td
td {{ post.title }} /td
td {{ post.body }} /td
/tr
/tbody
/table

kthorngren

What happens?

Do you get alert errors or errors in the browser's console?

Looks like you are using a for loop to populate the table via Angular then initializing Datatables. Make sure the Datatable initialization happens after the table is. populated otherwise Datatables won't know about the added row data.

Kevin