Skip to main content

How to Use DataTables in Angular 8

Updated on: webdamn Angular 8, Tutorials

jQuery DataTables is a popular jQuery library to display data in grid table. The DataTables convert simple HTML table into feature rich HTML Table with advance options like searching, sorting and pagination.

So if you’re thinking about integrating jQuery DataTables in your Angular 8 project then you’re here at right place. In our previous Angular 8 tutroal, you have learned how to create forms with validation in Angular 8. In this tutorial you will learn how to create Angular 8 project and integrate jQuery DataTables using angular datatable components.

We will cover this tutorial step by step to load create Angular 8 project and load required modules to integrate jQuery Datatables. We will also implement to make REST API HTTP call to load dynamic data from server end to display in jQuery DataTables.

Also, read:

Step1: How to Install Angular CLI

First we will install Angular CLI to create Angular 8 project. We will need Node 8.9 or higher and NPM 6 or higher to create Angular 8 project and use DataTables. You can check Node version by using node --version and npm --version. You can install latest Angular 8 by using following command.

npm install -g @angular/cli

Step2: Create a New Angular 8 Project

We will create a new Angular 8 project to use DataTables to show records. We will create project angular_datatables_project using following command. 

ng new angular_datatables_project

After above project created, it will generate all of your project files in project folder.

Step3: Install jQuery and DataTables Dependencies

Now we go to the project folder angular_datatables_project and installed required jQuery DataTables library.

cd angular_datatables_project

We will install jQuery DataTables libraray using following commands.

$ 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

Step4: Import jQuery DataTables and CSS Files

After successful installation of jQuery Datatables and related files, we will import CSS and JS libraries in the angular.json file as shown below.

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

Step5: Add Dependencies App Modules

We will add dependencies into app.module.ts file.

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

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

Step6: Add DataTables Modules and Make HTTP Request to Load Data

We will also add DataTables modules into app.componenet.ts file.

import { DataTablesModule } from 'angular-datatables';
import {BrowserModule} from '@angular/platform-browser';
import {HttpClient} from '@angular/common/http';
import 'rxjs/Rx';
import { Observable } from 'rxjs/Rx';
import { CommonModule } from '@angular/common';

Now we will make HTTP request to get all data from server by making REST API call. We will store returned response data into object to use in templatre file to display reocrds.

public empData: Object;
public temp: Object=false;
constructor(private http: HttpClient) {}
ngOnInit(): void {
this.http.get('https://jsonplaceholder.typicode.com/posts').subscribe((resp: Response) => {
	this.empData = resp;
	this.temp = true;
  });
}

Step7: Display Records in DataTables in Angular 8

Now we will make changes into app.component.html file to display records in DataTables. We will loop through empData object to bind data into table.

<table datatable class="table row-border hover" *ngIf="this.temp">
  <thead>
    <tr>
      <th>UserId</th>
      <th>Subject</th>
      <th>Message</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let emp of this.empData">
      <td>{{emp.userId}}</td>
      <td>{{emp.title}}</td>
      <td>{{emp.body}}</td>
    </tr>
  </tbody>
</table>

Here in this short tutorial you have learned how to install Angular 8 CLI and create new Angular 8 project. You have learned how to integrate jQuery DataTables with Angular 8 project with angular datatable components. If you have any query or suggestions, feel free to give your comments.

You may also like:

3 thoughts on “How to Use DataTables in Angular 8”

  1. Some errors I encountered:
    1. Observable is not exported from rxjs/Rx It appears to be in rxjs only.
    1a. There appears to be no such thing as rxjs/Rx
    2. CORS policy issues when running on localhost and hitting a server

Comments are closed.