Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 7 Datatables Working Example.
Angular 7 has just launched and it is in very high in demand. Angular 7 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:
I will hope that, this will help you in rendering json data in datatables.
Here are the working steps, you need to follow:
1. Very first, you need to run below commands to set your Angular 7 application:
$ npm install -g @angular/cli
$ ng new angulardatatables
$ cd angulardatatables
$ ng serve
http://localhost:4200/
2. After, it run below commands to add datatable and bootstrap into Angular Application:
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. Now add below code into your 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 code into 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>
If you have any query related to this post, then please do comment below or asl question.
Thank you,
jatt budhi,
Therichpost
Hello, can you please share the code for laravel data In angular 7 datatables?
Thank you
Hi, please check this link:
https://therichpost.com/how-to-show-data-in-angular-7-datatables-with-laravel-rest-api
Thank you for this post.
i did everything same to same but its not working for me still showing no data available in data table.
can you post the solution.
Your welcome Sam
Hi, dipti, can you show me the error?
Thank you for your help.
Your article helped me.
But I have one problem.
I can’t sort data in this dataTable.
Can you help me again?
Ok daniel, I will help you.
hi ajay,can you tell me how to implement custom search for individual column
Custom search for each column, can you please show me any reference link or design?
hello , i did something similar but manually, i mean , i put the js and css files in the folder by myself , and add these in angular.json file. If i tested it with a table static (with data put by myself) is working perfect with all the functionalities. But if i write the data dinamically from a rest api the datatable work inapropiately, i mean , datatable format the table very well but the funtionalities (filter, pagination etc) doesnt work , and the end of the rows data appear “no data available ” . but the data is in. It seem that datatable apply the configuration to the table before the data in writed and for that reason it think that no data is available.
I hope you understand my issues, my english is not good at all. How i can solve that.
Thanks
PD: i tried doint the same procces explained in you tutorial but the same problem happends.
I got it, you want API data?
I am consuming my own api, and work fine, the data is showed in the table but… the datatable dont recognize the data in the funtionalities. If i press sorting or search any word, it show me nothing, becasue for it no data is available . pity i can not share a screen capture here.
My table show the data but in the last row say ” no data available in data table” , for that reason i suspect it applying the datatable funtionalities before the data is loaded in the component (table).
Thanks
Great.
Very helpful..thank you
Thank you
Thank you
I also have same issue. If you solved till now… Please give me solution.
I want to put (showing 1 to 5 of 60 entries) next to (showing [10] entries), and I want to style the table as per my need
Like gap between the tr. how can I do this
I will share video tutorial link on my blog and you can get from my youtube channel: therichpost
I didn’t get the link
Hi, I will update it today and please subscribe my channel for updates.
When I run connect my datatable to my server, it comes no data available
ABCD S 9994388579 area1 dummy.png court1 Bangluru,Karnataka
Sajai S 9994388579 area2 dummy.png court2 Bangluru,Karnataka
No data available in table
aand when I search the data all the data goes off.
I know this and this is because data comes little bit late and datatable init bit faster.
DID you check my youtube video for this?
yes i checked your youtube video but i coudnt get it and i am doing this datatable in angular 7
If someone has a dependency when installing, do not forget to use the option
npm install angular-datatables –save –legacy-peer-deps
if you have trouble viewing the pagination options make sure you have the following structure
{{cabbage}}
{{user [col]}}
If someone has a dependency when installing, do not forget to use the option
npm install angular-datatables –save –legacy-peer-deps
if you have trouble viewing the pagination options make sure you have the following structure
[table class = “table table-striped table-bordered table-sm row-border hover” datatable [dtOptions] = “dtOptions”]
[ thead]
[tr]
[th * ngFor = “let col of columns”]
{{col}}
[/th]
[/tr]
[/thead]
[tbody]
[tr * ngFor = “let user of users”]
[td * ngFor = “let col of index”]
{{user [col]}}
[/td]
[/tr]
[/tbody]
[/table]
Good.