Angular 9 Datatable Binding with dtOptions

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

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