Angular 13 datatable example; In this tutorial, we will learn how to integrate datatables in angular 13 apps and display data dynamically in table.
Angular 13 Datatable Example with Pagination, Sorting, Filtering
Use the following steps and implement datatables in angular 13 apps; as follows:
- 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 New Angular App
First of all, open your terminal and execute the following command on it to install angular app:
ng new my-new-app
Step 2 – Install jQuery & DataTable Plugins
Then install NPM package called jquery, datatables.net, and bootstrap etc to implement datatable in angular apps. 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
After that, open angular.json file and update 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 3 – Add Code on Module.ts File
Visit src/app directory and open app.module.ts file. Then import 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 4 – Create HTML Table on View File
Create a table to display dynamic data in angular 13 app. So, visit src/app/app.component.html and update the following code into it:
<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 On Component ts File
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 6 – Start Angular App
In this step, execute the following command on terminal to start angular app:
ng serve