Installation:
To use angular-datatables,
we must need to have Node 8.9 or higher and NPM 6 or higher installed.
We recommend using angular-cli version 7.Y.Z to create and manage your angular project.
NPM:
We need to install its dependencies before
getting the latest release using NPM:
1. npm
install jquery --save
2. npm
install datatables.net --save
3. npm
install datatables.net-dt --save
4. npm
install angular-datatables --save
5. npm
install @types/jquery --save-dev
6. npm
install @types/datatables.net --save-dev
Setup angular.json :
Add the dependencies in the scripts and styles data-table attributes:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"demoApp": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/demoApp",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"node_modules/datatables.net-dt/css/jquery.dataTables.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net/js/jquery.dataTables.js"
]
}
The following Example for Angular 7 angular-datatables are :
Your environment has been set up for using Node.js and npm -
C:\Windows\System32>d:
D:\>cd Angular7
D:\Angular7>cd DemoApp
D:\Angular7\demoApp>npm install jquery --save
+ jquery@3.3.1
added 1 package from 1 contributor and audited 39129 packages in 29.892s found 0 vulnerabilities
D:\Angular7\demoApp>npm install datatables.net --save
+ datatables.net@1.10.19
added 1 package from 1 contributor and audited 39131 packages in 12.469s found 0 vulnerabilities
D:\Angular7\demoApp>npm install datatables.net-dt --save
+ datatables.net-dt@1.10.19
added 1 package from 1 contributor and audited 39135 packages in 12.126s found 0 vulnerabilities
D:\Angular7\demoApp>npm install angular-datatables --save
+ angular-datatables@7.0.0
added 1 package from 3 contributors and audited 54230 packages in 12.134s found 0 vulnerabilities
D:\Angular7\demoApp>npm install @types/jquery --save-dev
+ @types/jquery@3.3.22
added 2 packages from 22 contributors and audited 54232 packages in 13.464s found 0 vulnerabilities
D:\Angular7\demoApp>npm install @types/datatables.net --save-dev
+ @types/datatables.net@1.10.13
added 1 package from 4 contributors and audited 54235 packages in 13.259s found 0 vulnerabilities
Add the scripts and styles dependencies -
Now Add the dependencies in the scripts and styles attributes in the angular.json file.
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"demoApp": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/demoApp",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"node_modules/datatables.net-dt/css/jquery.dataTables.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net/js/jquery.dataTables.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "demoApp:build"
},
"configurations": {
"production": {
"browserTarget": "demoApp:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "demoApp:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.css"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"demoApp-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "demoApp:serve"
},
"configurations": {
"production": {
"devServerTarget": "demoApp:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "demoApp"
}
NgModule - Import the DataTablesModule at the appropriate level of your app.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { DataTablesModule } from 'angular-datatables';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
DataTablesModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app-routing.module.ts -
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.html -
<h2>Angular 7 datatable - UserList</h2>
<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>
app.component.ts -
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Example for Angular 7 DataTable';
dtOptions: DataTables.Settings = {};
dtUsers =[
{"id": 101, "firstName": "Anil", "lastName": "Singh"},
{"id": 102, "firstName": "Reena", "lastName": "Singh"},
{"id": 103, "firstName": "Aradhay", "lastName": "Simgh"},
{"id": 104, "firstName": "Dilip", "lastName": "Singh"},
{"id": 105, "firstName": "Alok", "lastName": "Singh"},
{"id": 106, "firstName": "Sunil", "lastName": "Singh"},
{"id": 107, "firstName": "Sushil", "lastName": "Singh"},
{"id": 108, "firstName": "Sheo", "lastName": "Shan"},
{"id": 109, "firstName": "Niranjan", "lastName": "R"},
{"id": 110, "firstName": "Lopa", "lastName": "Mudra"},
{"id": 111, "firstName": "Paramanand","lastName": "Tripathi"}
];
ngOnInit(): void {
this.dtOptions = {
data:this.dtUsers,
columns: [{title: 'User ID', data: 'id'},
{title: 'First Name', data: 'firstName'},
{title: 'Last Name', data: 'lastName' }]
};
}
}
For source code email me at - anil.singh581@gmail.com
OR
Would you like to download this file? SourceCode_ng7DataTable.zip (66M)
OR
OR
Would you like to download this file? SourceCode_ng7DataTable.zip (66M)
OR
For the video view – click on this link to demo view….
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|