Angular 13 Datatable Example with Pagination, Sorting, Filtering

Angular 13 datatable example; In this tutorial, we will learn how to integrate datatables in angular 13 apps and display data dynamically in table.

Angular 13 Datatable Example with Pagination, Sorting, Filtering

Use the following steps and implement datatables in angular 13 apps; as follows:

• Step 1 – Create New Angular App
• Step 2 – Install jQuery & DataTable Plugins
• Step 3 – Import Module.ts File
• Step 4 – Create HTML Table on View File
• Step 5 – Add Code On Component ts File
• Step 6 – Start Angular App

Step 1 – Create New Angular App

First of all, open your terminal and execute the following command on it to install angular app:

ng new my-new-app

Step 2 – Install jQuery & DataTable Plugins

Then install NPM package called jquery, datatables.net, and bootstrap etc to implement datatable in angular apps. So, You can install the packages by executing the following commands on the terminal:

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
npm install bootstrap --save

After that, open angular.json file and update the following code into it:

...
"styles": [
              ...
              "node_modules/datatables.net-dt/css/jquery.dataTables.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
            ],
            "scripts": [
            "node_modules/jquery/dist/jquery.js",
            "node_modules/datatables.net/js/jquery.dataTables.js",
            "node_modules/bootstrap/dist/js/bootstrap.js",
            ]
.

Step 3 – Add Code on Module.ts File

Visit src/app directory and open app.module.ts file. Then import the following code into it:

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 – Create HTML Table on View File

Create a table to display dynamic data in angular 13 app. So, visit src/app/app.component.html and update the following code into it:

<h1>Angular 13 Datatables Example - Tutsmake.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>

Step 5 – Add Code On Component ts File

Visit the src/app directory and open app.component.ts. Then add the following code into component.ts file:

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 6 – Start Angular App

In this step, execute the following command on terminal to start angular app:

ng serve

Recommended Angular Tutorials