Angular 9 Datatables working example

·

, ,
Angular 9 Datatables Working Example

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 9 Datatable Working Example.

Angular 12 has just launched and it is in very high in demand. Angular 12 increased his performance speed. I am showing the data in Datatables with custom json data and also for giving good look to datatable, I have used bootstrap in it, here is the working picture and don’t forget to install latest node version.

Angular 9 Datatables Working Example
Angular 9 Datatables working example

Here is the complete working code snippet for Angular 9 Datatables working example and use this carefully:

1. Here are the basics commands, you need to run for latest angular 9 setup and environment:

$ npm install -g @angular/cli

$ ng new angulardatatables

$ cd angulardatatables

$ ng serve

//Here is the url, you need to run into your browser and see working angular test project
http://localhost:4200/

2. Here are the basics commands, you need to run into your terminal for datatable and its dependencies:

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 ngx-bootstrap bootstrap --save

3. After done with commands add below code into you angular.json file:

...
"styles": [
              "src/styles.css",
              "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",
            ]
...

4. Now add below code into your app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {DataTablesModule} from 'angular-datatables';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DataTablesModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. Now add below code into app.component.ts file:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public data = [
    {name: 'therichpost', 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: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
];

  title = 'angulardatatables';
  dtOptions: DataTables.Settings = {};
  ngOnInit() {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
      processing: true
    };
}
}

6. Now add below code into app.component.html file:

<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 data">
         <td>{{group.name}}</td>
         <td>{{group.email}}</td>
         <td>{{group.website}}</td>
     </tr>
  </tbody>
</table>

Don’t forget to run ng serve command to see final output.

Working Example

Guys if you have any kind of query then feel free to comment below.

Jassa Jatt

Thank you

Comments

39 responses to “Angular 9 Datatables working example”

  1. Bhargav Narne Avatar
    Bhargav Narne

    Cannot find module ‘angular-datatables’.

    i am getting this error

  2. Ajay Malhotra Avatar

    Hi Bhargav, did you follow the complete tutorial?

  3. Vijaya Bhaskar Avatar
    Vijaya Bhaskar

    When my data table page is rendered for first time I am getting below message at end of table “No data available in table”. Any Idea on how to get rid of this?

  4. Ajay Malhotra Avatar

    Are you getting dynamic data?

  5. Aman Kumar Avatar
    Aman Kumar

    Thanks !

  6. Ajay Malhotra Avatar

    You are welcome..

  7. Darijo Avatar
    Darijo

    hi there,

    is it possible to change styling of pagination options (first, last, 1, 2, …). I’m interesting in color change of buttons but unfortunatly I can’t find way how to do it.

    thx i best regards,

    Darijo

  8. Ajay Malhotra Avatar

    Yes with custom styles and you can also use bootstrap datatables.

  9. Adnan Sheikh Avatar
    Adnan Sheikh

    Hello. Thank you for the tutorial. I am getting an error “Can’t bind to ‘dtOptions’ since it isn’t a known property of ‘table’.” I am using angular 9 and following the documentation “https://l-lin.github.io/angular-datatables/#/getting-started”. Tried many things but nothing worked. Can you please help me?

  10. Ajay Malhotra Avatar

    Hi, are you getting dynamic data?

  11. Flo Avatar
    Flo

    Hey guys. I´ve got following ERROR in CMD:
    TS2503: Cannot find namespace ‘DataTables’.
    dtOptions: DataTables.Settings = {};

    Pls help

  12. Ajay Malhotra Avatar

    Please try this also:

    npm i @types/datatables.net –save-dev

  13. Ajay Malhotra Avatar

    Alsi try this:
    npm i @types/datatables.net –save-dev

  14. Jose Avatar
    Jose

    Hi, I am using dynamic data and the datatable doesn’t work, how can I fix it?

  15. Ajay Malhotra Avatar

    Tutorial for dynamic datatable is coming very soon.

  16. Evita Avatar
    Evita

    I am not able to change the properties of the datatable. No error is thrown.
    this.dtOptions = {
    pagingType: ‘full’,
    pageLength: 3,
    processing: true
    };
    It still shows 10 rows with full numbers in the paging

  17. Ajay Malhotra Avatar

    try like this:
    this.dtOptions = {
    pagingType: ‘full_numbers’,
    pageLength: 3,
    processing: true
    };

  18. Evita Avatar
    Evita

    Can I change the style of .dataTables_filter input[type=”search”] just for one page, while for others I need it to be the existing one . I tried adding styles to it in the .component.css page, But it doesnt pick the style from there for datatables.

  19. Ajay Malhotra Avatar

    Yes, you do with adding component.html file.

  20. Muhammad Fahad Avatar
    Muhammad Fahad

    I follow all these steps but it’s not working. Its only show me the simple table.

  21. Ajay Malhotra Avatar

    please send me error

  22. Amit Avatar
    Amit

    Thanks for the article, helped me learning this,
    i increased the number of columns to 9,
    and in dtOptions added
    responsive : true
    but it didnt make the table responsive. Any ideas

  23. Ajay Malhotra Avatar

    Will update you soon.

  24. gautam Avatar
    gautam

    ERROR in src/app/app.component.html:1:87 – error NG8002: Can’t bind to ‘dtOptions’ since it isn’t a known property of ‘table’.

    1

    ~~~~~~~~~~~~~~~~~~~~~~~

    src/app/app.component.ts:5:16
    5 templateUrl: ‘./app.component.html’,
    ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.

    *I copied each and everything from here and pasted replacing the default structure still its not working*

  25. michael Avatar
    michael

    error NG8002: Can’t bind to ‘dtOptions’ since it isn’t a known property of ‘table’.

  26. david Avatar
    david

    Hi im struggling with this error
    core.js:4197 ERROR ReferenceError: $ is not defined
    at angular-datatables.directive.js:52
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:27425)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at invokeTask (zone-evergreen.js:480)
    at ZoneTask.invoke (zone-evergreen.js:469)
    at timer (zone-evergreen.js:2552)

    can you please help me

  27. Jeet Avatar
    Jeet

    Hi I’m looking for fixedHeader for datatable but it’s not working.

  28. Jitender Avatar
    Jitender

    Yes I am using dynamic data I am facing same Issue .Please help

  29. sarah Avatar
    sarah

    Is the Tutorial for dynamic datatable is ready now please?

  30. sarah Avatar
    sarah

    Is the Tutorial for dynamic datatable is ready now please?

  31. Indranil Chatterjee Avatar
    Indranil Chatterjee

    I want to export my datatable data as pdf in angular. How can i do that?