Angular 13 datatable example with pagination sorting filtering

In this tutorial, we will learn how to create a table with pagination, sorting, and filtering using datatables in an Angular 13 application.

• 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 a new Angular 13 app

To get started, open your terminal and run the following command to create a new Angular 13 app:

ng new my-new-app

Step 2: Install jQuery and Datatables plugins

Next, you need to install the required NPM packages for implementing datatables in Angular apps. Run the following commands on your terminal to install the necessary packages:

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 the packages are installed, open the angular.json file and add the following code in the styles and scripts sections:

"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: Import the required modules

In the app.module.ts file, add the following code to import the required modules:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { DataTablesModule } from 'angular-datatables';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DataTablesModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Create the HTML table

In the app.component.html file, create an HTML table to display the dynamic data:

<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 to the component ts file

In the app.component.ts file, add the following code to set up the datatable:

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 the Angular app

Finally, run the following command on your terminal to start the Angular app:

ng serve

That’s it! You should now see the table with pagination, sorting, and filtering in your Angular 13 app.