Using full featured Datatables Plugin with Angular

Question

I am trying to add Datatables plugin (datatables.net) facility with my angualar 6 project. I am not sure how should I include the necessary css, js and other required files to my project with npm installer. After selecting my necessary options I am following the NPM Install method with these :

npm install --save datatables.net-bs4
npm install --save datatables.net-buttons-bs4
npm install --save datatables.net-colreorder-bs4
npm install --save datatables.net-responsive-bs4
npm install --save datatables.net-rowgroup-bs4
npm install --save datatables.net-scroller-bs4

After Installing, I am not sure how will I use these in my project. my project is using ngx-bootstrap (https://www.npmjs.com/package/ngx-bootstrap) for styling.

style.scss // where I am only importing my css theme from node_modules

In ngx-bootstrap the styles are component wise, and I am using those easily. So, how can I use datatables features as a component ? In another way, where should I include the css, and required js files to achieve the datatables facilities on a page?

If anyone has done it please let me know, or any suggestions will be appreciated.

Thanks.

Answer 1

By just watching the question and the answer from @dickrichie, I still had an error:

ERROR in node_modules/angular-datatables/src/angular-datatables.directive.d.ts(1
,23): error TS2688: Cannot find type definition file for 'datatables.net'.
node_modules/angular-datatables/src/angular-datatables.directive.d.ts(15,16): er
ror TS2503: Cannot find namespace 'DataTables'.
node_modules/angular-datatables/src/angular-datatables.directive.d.ts(27,25): er
ror TS2503: Cannot find namespace 'DataTables'.

I was missing the two last install steps to make Datatables.net works with Angular 6.

npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables --save
npm install @types/datatables.net --save-dev

Then follow the message from @dickrichie to edit angular.json and app.module.ts files. Now any table tag where you add "datatable" should work.

-- EDIT

The first part of that answer is with using angular-datatables, but as @fahimuddin asked in fact how to do that without that package, I tried differently.

So no need to install the last two packages, the angular.json looks the same as in @dickrichie answer and in a component I just added before the @Component:

declare var $: any;

And then use directly jQuery and Datatables in ngOnInit():

$('#your-datatable-id').DataTable();

It works and nobody's complaining but I'm not sure if it's a good practice? (And as in my case I'm trying to do an Angular-Electron app, it's still not working in Electron, it wasn't working with angular-datatable neither, but that's another problem!)

Answer 2

use angular data tables in Angular 6 angular-datatables

You need to install its dependencies before getting the latest release using NPM:

npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables@6.0.0 --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev

angular.json

Import the DataTablesModule in app.module.ts

import { DataTablesModule } from 'angular-datatables';

imports: [
    DataTablesModule
  ],

my datatableslibrary.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Subject } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { DataService } from '../data.service';

@Component({
  selector: 'app-datatableslibrary',
  templateUrl: './datatableslibrary.component.html',
  styleUrls: ['./datatableslibrary.component.css']
})
export class DatatableslibraryComponent implements OnInit, OnDestroy {

  users$: any[] = [];
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject();

  constructor(private http: HttpClient, private data: DataService) {
  }

  ngOnInit() {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
      processing: true
    };
    this.data.getUsers().subscribe(data => {
      this.users$ = data;
      this.dtTrigger.next();
    });
  }

  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }

}

my datatableslibrary.component.html

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

Answer 3

I got DataTables working by doing the following:

angular.json

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

app.module.ts

        import {DataTablesModule} from 'angular-datatables';


        imports: [
                 ...
                 DataTablesModule
                ]

You may have to stop and re-serve to see changes.

Answer 4

You can find a full answer here: https://medium.com/apprendre-le-web-avec-lior/angular-5-and-jquery-datatables-fd1dd2d81d99

Follow the steps and you will be OK

Answer 5

Just add your .css files in styles section and .js files in Scripts section, in angular(-cli).json. I think this would resolve your issues.