Angular 16 jQuery dataTable Example

jQuery DataTables is a powerful and flexible jQuery plugin that enhances HTML tables, providing sorting, filtering, pagination, and many other useful functionalities.

In this tutorial, you will learn how to install and integrate jQuery dataTable in angular 16 applications and display data from web API services.

jQuery dataTable Angular 16 Example Tutorial

Steps to install, integrate jQuery DataTables and display data using web services into an Angular 16 application:

• Step 1 – Set up a New Angular 16 Project
• Step 2 – Install jQuery and DataTables
• Step 3 – Configure jQuery and DataTables
• Step 4 – Import Required Module
  

• Step 5 – Create DataTable in HTML Template
• Step 6 – Defined the root component
• Step 7 – Run the Application

Step 1 – Set up a New Angular 16 Project

First of all, open your cmd or command prompt and execute the following command on it to install and create a new Angular 16 project using the Angular CLI:

ng new my-new-app

Step 2 – Install jQuery and DataTables

Next, you need to install NPM package called jquery, datatables.net and bootstrap etc to implement datatable in angular app. 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

Step 3 – Configure jQuery and DataTables

Next, you need to open angular.json file and add 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 4 – Import Required Module

Next, you need to import some required module. So, visit src/app directory and open app.module.ts file. Then add 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 5 – Create DataTable in HTML Template

Next, you need to create table to display dynamic data in angular app. So, visit src/app/app.component.html and update the following code into it:

<h1>Angular 11 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 6 – Defined the root component

Next, you need to define the root component. So, 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 7 – Run the Application

Finally, let’s execute the Angular application and see the DataTable in action:

ng serve

Navigate to http://localhost:4200 in your web browser, and you should see the DataTable displaying the sample data with sorting, pagination, and search functionality.

Conclusion

Congratulations! You have successfully integrated jQuery DataTables into an Angular 16 project. You can now use DataTables to create interactive and feature-rich data tables in your Angular applications, providing a more pleasant user experience for data representation and manipulation.

Recommended Angular Posts