Angular Datatables is popular among developers
developing in web projects using the mainly jQuery library. It is a full
package of many basic features like filter, sorting, and paging, etc.
Prerequisite
of 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 7+
or higher version to
create and manage your angular project.
NPM Packages:
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:
"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"
]
},
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 8 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 of Angular 8 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' }]
};
}
}
The Result looks like.
Related
Post-
Angular 7 datatables Example
|
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..
|
