How to Use Jquery Datatable in Angular?

This article will provide example of how to use datatables in angular. This article goes in detailed on angular datatable example with pagination. if you have question about angular datatables example then i will give simple example with solution. you can see how to use ngx datatable in angular.

In this tutorial, i will give you simple working example of how to integrate datatables in angular 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 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...