Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 9 Datatable Working Example.
Angular 12 has just launched and it is in very high in demand. Angular 12 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 snippet for Angular 9 Datatables working example 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.
Guys if you have any kind of query then feel free to comment below.
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..
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?
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
Alsi try this:
npm i @types/datatables.net –save-dev
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
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/
Check this:
https://therichpost.com/angular-9-datatable-binding-with-dtoptions/
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/
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.
Yes I am using dynamic data I am facing same Issue .Please help
Please check this:
https://therichpost.com/angular-11-datatable-with-dynamic-data/
Is the Tutorial for dynamic datatable is ready now please?
Is the Tutorial for dynamic datatable is ready now please?
Check this also:
https://therichpost.com/angular-12-datatable-with-dynamic-data/
I want to export my datatable data as pdf in angular. How can i do that?
Here you can check:
https://therichpost.com/angular-12-primeng-data-table-with-export-to-pdf-button/