Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 9 Datatable Working Example.
Angular 9 has just launched and it is in very high in demand. Angular 9 increased his performance speed. I am showing the data in Datatables with custom json data and also for giving good look to datatable, I have used bootstrap in it, here is the working picture and don’t forget to install latest node version.

Here is the complete working code and use this carefully:
1. Here are the basics commands, you need to run for latest angular 9 setup and environment:
$ npm install -g @angular/cli $ ng new angulardatatables $ cd angulardatatables $ ng serve //Here is the url, you need to run into your browser and see working angular test project http://localhost:4200/
2. Here are the basics commands, you need to run into your terminal for datatable and its dependencies:
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 ngx-bootstrap bootstrap --save
3. After done with commands add below code into you angular.json file:
... "styles": [ "src/styles.css", "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", ] ...
4. Now add below code into your app.module.ts file:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import {DataTablesModule} from 'angular-datatables'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DataTablesModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
5. Now add below code into app.component.ts file:
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public data = [ {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'}, {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'}, {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'}, {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'}, ]; title = 'angulardatatables'; dtOptions: DataTables.Settings = {}; ngOnInit() { this.dtOptions = { pagingType: 'full_numbers', pageLength: 5, processing: true }; } }
6. Now add below code into app.component.html file:
<table class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions"> <thead> <tr> <th>Name</th> <th>Email</th> <th>Website</th> </tr> </thead> <tbody> <tr *ngFor="let group of data"> <td>{{group.name}}</td> <td>{{group.email}}</td> <td>{{group.website}}</td> </tr> </tbody> </table>
Don’t forget to run ng serve command to see final output.
Jassa Jatt
Thank you
Cannot find module ‘angular-datatables’.
i am getting this error
Hi Bhargav, did you follow the complete tutorial?
When my data table page is rendered for first time I am getting below message at end of table “No data available in table”. Any Idea on how to get rid of this?
Are you getting dynamic data?
Thanks !
You are welcome..
Yes I am using dynamic data I am facing same Issue .Please help
hi there,
is it possible to change styling of pagination options (first, last, 1, 2, …). I’m interesting in color change of buttons but unfortunatly I can’t find way how to do it.
thx i best regards,
Darijo
Yes with custom styles and you can also use bootstrap datatables.
Hello. Thank you for the tutorial. I am getting an error “Can’t bind to ‘dtOptions’ since it isn’t a known property of ‘table’.” I am using angular 9 and following the documentation “https://l-lin.github.io/angular-datatables/#/getting-started”. Tried many things but nothing worked. Can you please help me?
Hi, are you getting dynamic data?
Alsi try this:
npm i @types/datatables.net –save-dev
Hey guys. I´ve got following ERROR in CMD:
TS2503: Cannot find namespace ‘DataTables’.
dtOptions: DataTables.Settings = {};
Pls help
Please try this also:
npm i @types/datatables.net –save-dev
Check this:
https://therichpost.com/angular-9-datatable-binding-with-dtoptions/
Hi, I am using dynamic data and the datatable doesn’t work, how can I fix it?
Tutorial for dynamic datatable is coming very soon.
I am not able to change the properties of the datatable. No error is thrown.
this.dtOptions = {
pagingType: ‘full’,
pageLength: 3,
processing: true
};
It still shows 10 rows with full numbers in the paging
try like this:
this.dtOptions = {
pagingType: ‘full_numbers’,
pageLength: 3,
processing: true
};
Can I change the style of .dataTables_filter input[type=”search”] just for one page, while for others I need it to be the existing one . I tried adding styles to it in the .component.css page, But it doesnt pick the style from there for datatables.
Yes, you do with adding component.html file.
I follow all these steps but it’s not working. Its only show me the simple table.
please send me error
ERROR in src/app/app.component.html:1:87 – error NG8002: Can’t bind to ‘dtOptions’ since it isn’t a known property of ‘table’.
1
~~~~~~~~~~~~~~~~~~~~~~~
src/app/app.component.ts:5:16
5 templateUrl: ‘./app.component.html’,
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.
*I copied each and everything from here and pasted replacing the default structure still its not working*
Please check this:
https://therichpost.com/angular-9-datatable-binding-with-dtoptions/
Thanks for the article, helped me learning this,
i increased the number of columns to 9,
and in dtOptions added
responsive : true
but it didnt make the table responsive. Any ideas
Will update you soon.
Try this:
https://therichpost.com/angular-9-datatable-binding-with-dtoptions/
error NG8002: Can’t bind to ‘dtOptions’ since it isn’t a known property of ‘table’.
https://therichpost.com/angular-9-datatable-binding-with-dtoptions/
Hi im struggling with this error
core.js:4197 ERROR ReferenceError: $ is not defined
at angular-datatables.directive.js:52
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Object.onInvokeTask (core.js:27425)
at ZoneDelegate.invokeTask (zone-evergreen.js:398)
at Zone.runTask (zone-evergreen.js:167)
at invokeTask (zone-evergreen.js:480)
at ZoneTask.invoke (zone-evergreen.js:469)
at timer (zone-evergreen.js:2552)
can you please help me
Please check this:
https://therichpost.com/angular-10-datatable-working-example/
Hi I’m looking for fixedHeader for datatable but it’s not working.
Please check this:
https://therichpost.com/angular-11-datatable-with-dynamic-data/