Here, i will show you angular 9 datatable example with pagination. Here you will learn angular 9 datatables dtoptions example. In this article, we will implement a angular 9 datatables example. We will look at example of angular 9 datatable example. you will do the following things for how to integrate datatables in angular 9.
In this tutorial, i will give you simple working example of how to integrate datatables in angular 9 application. we will use angular datatable with ajax example. we will use third party api and get all post data then display in table format using datatable. using datatable you can easily search, sorting and paginate your data.
You can see step by step bellow example of use datatable in angular 8/9 application. you can also see bellow preview:
Preview:
Step 1: Create New App
You can easily create your angular app using bellow command:
ng new ngDatatable
Step 2: Install Npm Packages
In this step, we will install list of following npm packages for datatables angular. so let's run both command:
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
After successfully installed all packages we need to add css and js files on angular.json file. so let's add as like bellow:
angular.json
{
...
"projects": {
"your-app-name": {
"architect": {
"build": {
"options": {
"styles": [
"node_modules/datatables.net-dt/css/jquery.dataTables.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net/js/jquery.dataTables.js"
],
...
}
Step 3: Import DataTablesModule
Now, here we will import DataTablesModule from angular-datatables and then we add on declarations part. we also need to import HttpClientModule for getting data. so let's update app.module.ts file as like bellow:
src/app/app.module.ts
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: Update Component ts File
Here, we will update app.component.ts file here, in this file we will write datatable configuration using dtOptions and call api for data.
You can update as bellow app.component.ts file.
src/app/app.component.ts
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 5: Update HTML File
Here, we will update html file as like bellow, so update it as like bellow:
src/app/app.component.html
<h1>Angular Datatables Step by Step Example - HDTuto.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>
Now you can run angular 9 app:
Run Angular App:
ng serve
I hope it can help you...
Do you like below Tutorials ?
- Multidimensional Array Search By Value in PHP
- Laravel Install Font Awesome Icons Example
- How to Use Moment JS in Laravel?
- Angular 9 Get Environment Variables Example
- Angular Delete a Component From Cli Example
- How to Upload File from Local to Server using SSH?
- Angular Use CKEditor Example Tutorial
- How to Use Multiple Select Dropdown in Laravel?