The
following steps for Angular 7 data-table are :
Your environment has been set up for using Node.js and npm -
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
added 1 package from 1 contributor and audited
39129 packages in 29.892s found 0 vulnerabilities
D:\Angular7\demoApp>npm install datatables.net --save
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
added 1 package from 1 contributor and audited
39135 packages in 12.126s found 0 vulnerabilities
D:\Angular7\demoApp>npm install angular-datatables --save
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/[email protected]
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/[email protected]
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 - [email protected]
&via=stc_network)
|
Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog.
For more detail about me, kindly refer to this link..
|
You Might Also Like
