Using full featured Datatables Plugin with Angular 6

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

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!)