Angular 9/8 Datatable Example with Pagination, Sorting, Filtering

By Hardik Savani October 20, 2023 Category : Angular

Now, let's see example of angular 9/8 datatable example. I’m going to show you about how to integrate datatables in angular 9/8. i would like to share with you angular 9 datatables ajax example. This article goes in detailed on angular 8 datatable example with pagination.

In this tutorial, i will give you simple working example of how to integrate datatables in angular 9 application. we will use angular datatable with ajax example. we will use third party api and get all post data then display in table format using datatable. using datatable you can easily search, sorting and paginate your data.

You can see step by step bellow example of use datatable in angular 8/9 application. you can also see bellow preview:

Preview:

Step 1: Create New App

You can easily create your angular app using bellow command:

ng new ngDatatable

Step 2: Install Npm Packages

In this step, we will install list of following npm packages for datatables angular. so let's run both command:

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

After successfully installed all packages we need to add css and js files on angular.json file. so let's add as like bellow:

angular.json

{

...

"projects": {

"your-app-name": {

"architect": {

"build": {

"options": {

"styles": [

"node_modules/datatables.net-dt/css/jquery.dataTables.css"

],

"scripts": [

"node_modules/jquery/dist/jquery.js",

"node_modules/datatables.net/js/jquery.dataTables.js"

],

...

}

Step 3: Import DataTablesModule

Now, here we will import DataTablesModule from angular-datatables and then we add on declarations part. we also need to import HttpClientModule for getting data. so let's update app.module.ts file as like bellow:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { DataTablesModule } from 'angular-datatables';

import { HttpClientModule } from '@angular/common/http';

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

DataTablesModule,

HttpClientModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Step 4: Update Component ts File

Here, we will update app.component.ts file here, in this file we will write datatable configuration using dtOptions and call api for data.

You can update as bellow app.component.ts file.

src/app/app.component.ts

import { Component, OnInit } from '@angular/core';

import { HttpClient } from '@angular/common/http';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit{

title = 'datatables';

dtOptions: DataTables.Settings = {};

posts;

constructor(private http: HttpClient) { }

ngOnInit(): void {

this.dtOptions = {

pagingType: 'full_numbers',

pageLength: 5,

processing: true

};

this.http.get('http://jsonplaceholder.typicode.com/posts')

.subscribe(posts => {

this.posts = posts;

});

}

}

Step 5: Update HTML File

Here, we will update html file as like bellow, so update it as like bellow:

src/app/app.component.html

<h1>Angular Datatables Step by Step Example - ItSolutionStuff.com</h1>

<table datatable [dtOptions]="dtOptions" class="row-border hover">

<thead>

<tr>

<th>ID</th>

<th>Title</th>

<th>Body</th>

</tr>

</thead>

<tbody>

<tr *ngFor="let post of posts">

<td>{{ post.id }}</td>

<td>{{ post.title }}</td>

<td>{{ post.body }}</td>

</tr>

</tbody>

</table>

Now you can run angular 9 app:

Run Angular App:

ng serve

I hope it can help you...

Shares