Simple Angular DataTable Example with Angular 13

jQuery datatable is a very popular and featured jQuery grid plugin. This angular tutorial help to integrate jQuery datatable with angular 13. Angular 13 is an updated version of angular 2.

I will use angular CLI to create a Sample angular 13 application file structure and HTTP module to get data from rest API call. I have already shared tutorials for jQuery Datatable with PHP and MySQL and Angular Datatable Pagination, Sorting and Searching Using Ajax.

You can get more information about angularjs datatable on Official Website. Angular Datatable is an angular module that provides datatable directive along with jQuery datatable options like pagination, sorting, child rows, and searching.

I am using HTTP GET rest call to get all post data from the server side and display it into datatable with searching, sorting and pagination. Angular 13 is using TypeScript which will help to write code in an object-oriented manner using reusable classes and can import other application files as well.

How To Install Angular CLI

You need to make sure, You must have node version above 6.9 and npm version above 3.You can verify node version by using node --version and npm --version.You can install angularjs command line using below code.

npm install -g @angular/cli

-g installs the angular CLI globally on your system.

How To Create Angular 13 Using CLI

I have already installed angular 13 cli using the above steps, Now I will create simple jQuery datatable listing example using angular 13 CLI.

ng new sample-ng-app

You can replace sample-ng-app with the desired name of your project (without spaces and underscore).The above command will generate all of your project files and installed all of the node modules required for the project.

The Angular 13 file structure are:

src/
—- app/
——– app.component.ts
——– app.component.spec.ts
——– app.module.ts
——– app.component.html
—- main.ts
—- index.html
—- package.json
—- .angular-cli.json
—- (… some other files)

Where files are:

• package.json : This file will have all npm package information which are required for this application.
• angular-cli.json : This file will use to add all thrid party css and js files.
• app.component.ts : This file used to register other module.
• app.module.ts : This file used to import all application module.
• app.component.spec.ts : This file used for unit tests.
• app.component.html : This file used for all html element which will show into UI.
• index.html : This file is main entry file.
• main.ts : This file is use for bootstrapping application.It loads everything and controls the startup of the application.

Simple Datatable Listing with Pagination and Sorting in Angularjs 13

We have create 'sample-ng-app' angular 13 application using CLI and now integrate angular datatable with in this project.I will include all js and css dependent files of jQuery datatable.

Step 1: We will add datatable modules into package.json file under dependencies json object.

"angular-datatables": "^4.2.0",
"datatables.net": "^1.10.15",
"datatables.net-dt": "^1.10.15",
"jquery": "^3.2.1",

Step 2: We will add datatable modules into package.json file under devDependencies json object.
"@types/datatables.net": "^1.10.6",

Step 3: We will updated packages information using npm install command.

d:/sample-ng-app> npm install

Step 4: I will include all js and css file .angular-cli.json file otherwise need to include file into index.html head section.

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

Step 5: I will add dependencies modules 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 { }

Step 6: I will add datatable 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';

Step 7: I have injected dependency modules and will create a HTTP request to get all datas from server using rest call.I will store data into a variable which will use later on html file to iterate records.

title = 'Simple Datatable Example using Angular 13';
  public data: Object;
  public temp_var: Object=false;
  constructor(private http: HttpClient) {}
  ngOnInit(): void {

    this.http.get('https://jsonplaceholder.typicode.com/posts').subscribe((res: Response) => {
        this.data=res;
        this.temp_var=true;
      });
  }

Step 8: Finally, We will bind data into HTML table.I will add below HTML UI into app.component.html file.

<table datatable="" class="table row-border hover" *ngif="this.temp_var">
 <thead>
  <tr>
   <th>UserId</th>
   <th>Title</th>
   <th>Body</th>
  </tr>
 </thead>
 <tbody>
  <tr *ngfor="let rec of this.data">
   <td>{{rec.userId}}</td>
   <td>{{rec.title}}</td>
   <td>{{rec.body}}</td>
  </tr>
 </tbody>
</table>

Conclusion :

I have learned the basics of angular 13 and install CLI to create angular 13 application using command line.I have also describe the files structures and basic uses of files, Integrated jQuery datatable with angular 13 application using angular datatable components.