Angular 11 DataTable Tutorial Example - Yudhy Network

Share on:

Yudhy Network - Angular 11 datatables example. In this tutorial, you will learn how to implement jquery datatables in angular 11 app and display data dynamically.

Angular 11 datatable example. In this tutorial, you will learn from scratch how to integrate datatables in angular 11 app and display data dynamically in table.

And also, this tutorial will show you simple working example of how to integrate datatables in angular 11 app. And using third party api fetch all post data from it and display in table format using datatable in angular 11 app.

As well as, you can use modify and use another api for fetch and display data in datatable with angular 11 app.

Datatable Example In Angular 11

  • Step 1 – Create New Angular App
  • Step 2 – Add Code on Module.ts File
  • Step 3 – Add Code on View File
  • Step 4 – Add Code On Component ts File
  • Step 5 – 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

Then install NPM package called jquery, datatables.net and bootstrap etc to implement datatable in angular 11 app. 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",
            ]
.
Recommended:- Angular 11 Reactive Forms Validation Tutorial Example

Step 2 – Add Code on Module.ts File

In this step, visit src/app directory and open app.module.ts file. Then add 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 { }
Recommended:- Angular 11 Image Upload With Preview Tutorial

Step 3 – Add Code on View File

In this step, create table to display dynamic data in angular 11 app. So, visit src/app/app.component.html and update the following code into it:

<h1>Angular 11 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 4 – Add Code On Component ts File

In this step, 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;
    });
  
  }
  
}
Recommended:- Angular 11 CRUD Application Tutorial Example

Step 5 – Start Angular App

In this step, execute the following command on terminal to start angular app:

ng serve

Recommended Angular Posts

Recommended:- Angular 11 Radio Button Reactive Form Example
Recommended:- Angular 11 Select Dropdown Example Tutorial
Recommended:- Angular 11 Stripe Payment Checkout Gateway Example
Recommended:- Angular 11 Multiple File Upload Tutorial Example
Recommended:- Angular 11 Google Maps Integration Tutorial Example
Recommended:- Angular 11 Full Page Scrolling Example

Please ask in the comments!

Suport : Cotekno.Com

comments powered by Disqus