Angular 8Angular 9Bootstrap 4.5Datatable

Angular 9 Datatable Binding with dtOptions

Angular 9, Angular 10

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 9 Datatable Binding with dtOptions.

Please watch this video for proper understanding

Here is the code snippet and please use carefully:

1. Here are the basics commands you need to run to set datatable into your angular 9 application:

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

 

2. Now you need to add below code into your angular.json file:

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

 

3. Now you need to run below code into your app.module.ts file:

...
import {DataTablesModule} from 'angular-datatables';

imports: [
    ...
  DataTablesModule
  ],

 

4. Now you need to add below code into your app.component.ts file:

...
public dataa = [
    {name: 'Ajay', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'Jas', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
  {name: 'Jas', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
  {name: 'Jas', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
  ];

  dtOptions: DataTables.Settings = {};

  ngOnInit() {
  this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
    lengthMenu : [5, 10, 25],
      processing: true
    };
}

 

5. Finally you need to add below code inside your app.component.html file:

<div class="container">
<table class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Website</th>
    </tr>
  </thead>
  <tbody>
   <tr *ngFor="let group of dataa">
         <td>{{group.name}}</td>
         <td>{{group.email}}</td>
         <td>{{group.website}}</td>
     </tr>
  </tbody>
</table>
</div>

 

This is it and if you have any kind of query regarding Datatable Binding with dtOptions then you can watch above video or you can comment below.

Jassa

Thank you

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

2 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.