jQuery DataTables in Angular 17

Angular jQuery dataTables; Simply install jQuery dataTables module by using npm install jquery datatables and then use DataTableOptions, DataTableDirective & DataTableService class to configure, bind & interact class with data and html table on components in angular applications.

jQuery DataTables is a popular JavaScript library used to display data in grid tables, and it has some advanced features such as ordering and filtering data, pagination, hiding columns, searching, data to HTML tables.

How to use jQuery dataTables in Angular 17

Steps to install jQuery dataTables, configure, bind, and interact class with data and html table on components in angular applications:

Step 1 – Set up a New Angular Project

Run the ng new my-new-app --no-standalone command on cmd to install and create a new Angular project using the Angular CLI:

ng new my-new-app --no-standalone
cd my-new-app

Step 2 – Install BootStrap

Now, use the following commands on cmd or terminal window to install NPM package called bootstrap module in angular applications:

npm install bootstrap --save

Step 3 – Configure jQuery and DataTables

Navigate to angular application root folder and open angular.json file, and then add the following style and scripts into it like follows:

...
"styles": [
              ...
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
            ],
 "scripts": [
            ...
            "node_modules/bootstrap/dist/js/bootstrap.js",
            ]
.

Step 4 – Import Modules in TypeScript File

Open app.module.ts file from src/app folder and import modules in it; like the following:

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

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

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

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

Step 5 – Create HTML Table with jQuery DataTable in Template

Go to src/app/ folder and open app.component.html, and then create a table with jQuery dataTable and use it like the following to fetch data from API and display it in an HTML table in Angular:

<div class="container">
  <h1 class="text-center mb-2">Angular jQuery Datatables Example - Tutsmake.com</h1>
  <div class="row mt-2">
    <div class="col-lg-10 mx-auto">
  <table id="example" class="display" class="table mx-auto">

  <thead>
    <tr>
      <th>ID</th>
      <th>Title</th>
      <th>Body</th>
    </tr>
  </thead>
    <tbody>
      <!-- DataTable will populate rows here -->
    </tbody>
</table>
  </div>
  </div>
</div>

And navigate to root folder and open index.html and add the following script into it:

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <!-- Include DataTables CSS -->
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
  <!-- Include DataTables JS -->
  <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

Step 6 – Fetch Data from the API

Go to the src/app folder and open app.component.ts, and then get the data from the API using the httpClient.get() method in it and pass it to html table components; as follows:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
declare var $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  dataTable: any;
  apiData: any;

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get('http://jsonplaceholder.typicode.com/posts').subscribe((data: any) => {
      this.apiData = data;
      this.initializeDataTable();
    });
  }

  initializeDataTable(): void {
    this.dataTable = $('#example').DataTable({
      data: this.apiData,
      columns: [
        { title: 'Id', data: 'id' },
        { title: 'Title', data: 'title' },
        { title: 'Body', data: 'body' }
      ]
    });
  }

  ngOnDestroy(): void {
    if (this.dataTable) {
      this.dataTable.destroy();
    }
  }
}

Step 7 – Run the Application

Run ng serve command on cmd to start angular applications:

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

That’s all! You have successfully integrated jQuery DataTable and fetched data from API & displayed it in html table in angular into an Angular project.

Recommended Angular Posts