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
Leave a Reply