Can't bind to 'dtOptions' since it isn't a known property of 'table'.

Question

I'm working to get angular way work and use this code https://l-lin.github.io/angular-datatables/#/basic/angular-way

- node version:v6.10.3
- npm version:v6.10.3
- angular version:4.3.2
- jquery version:3.2.1
- datatables version:1.10.15
- angular-datatables version:4.2.0
- angular-cli version:1.2.6

I have made this steps to fix Unexpected value "DataTablesModule" imported by the module "AppModule". Please add a @NgModule Annotation.

 1-in tsconfig.json add
"baseUrl": ".",
"paths": {
   "@angular/*": [
    "node_modules/@angular/*"
 ]
 2-in webpack.comon.js add 
  plugins: [
         new TsConfigPathsPlugin({
          configFileName: helpers.root('tsconfig.json'),
          compiler: "typescript",
        })
   ]  

but get this error

Can't bind to 'dtOptions' since it isn't a known property of 'table'. 

Can anyone help me please to fix this isuue?

Nugatory

did you find any working solution for above issue ? – Pyrosis

Answer 1

If you have TablesComponent, you should use this line in your tables.module.ts file:

import { DataTablesModule } from 'angular-datatables';

And add DataTablesModule to @NgModule imports.

I had error when I add these lines in appComponent, but when I import in my special module, the problem was solved.

Moiramoirai

Answer 2

Step 1 make sure that angular-dataTable it's installed.

$ ng add angular-dataTables

Step 2 update this file angular-datatables.directive.d.ts

open this angular file node_modules/angular-datatables/src/angular-datatables.directive.d.ts

update this following line

static ɵdir: i0.ɵɵDirectiveDeclaration<DataTableDirective, "[datatable],never,{dtOptions: {alias: "dtOptions"; required: false;}; dtTrigger: { alias: "dtTrigger"; required: false; }; }, {}, never, never, false, never>;

Update it like this.

static ɵdir: i0.ɵɵDirectiveDeclaration<DataTableDirective, "[datatable]",
        never,
        { dtOptions: 'dtOptions', dtTrigger: 'dtTrigger' },
        never,
        never,
        never,
        false,
        never>;

Your HTML template

<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>

Eugeniusz

Bro, you're the goat Could you explain please why that modification to the DataTableDirective file make it works? – Barry

not working at all – Wychelm

Answer 3

Step 1. Update ".angular-cli.json" file Styles and scripts properties as below.

{
 ........
  "apps": [
    { 
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        //for bootstrap4 theme
        "../node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        //for Datatable
        "../node_modules/datatables.net/js/jquery.dataTables.js",
        //for bootstrap4
        "../node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js"
      ]
      ...
    }
  ],
 .....
}

Step 2. import DataTable Module in our Angular Application Module(Where you need.)

import { DataTablesModule } from 'angular-datatables';

Below is the example of html table which is using DataTable -

<table id='table' datatable [dtOptions]="dtOptions" class="table table-striped table-bordered" cellspacing="0" width="100%">
      </table>

Bloxberg

Answer 4

import { DataTablesModule } from 'angular-datatables';

that's right (Ganj Khani) import the DataTablesModule into app.module.ts file and put it in

@NgModule({ imports: [ CommonModule, DataTablesModule, MyRoutingModule ]

It will work as expected and make sure you have all configured properly for the dtOptions in your respective .ts file.

Scarper

Answer 5

For me it was quite simple fix. I forgot to add the datatable attribute to the table element. You must add that for the DataTableModule to pick it up.

Example:

<table datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions"></table>

Soho

Answer 6

Upgrade Your Project with this command :
>ng update @angular/cli   @angular/core   --allow-dirty   --force

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CustomerComponent } from './customer/customer.component';
import { DataTablesModule } from "angular-datatables";
import { CommonModule } from '@angular/common';

const routes: Routes = [

  { path: 'customer', component: CustomerComponent}
];

@NgModule({

  declarations: [

    CustomerComponent    ////without class declarations dataTable will not work....
  ],

  imports: [RouterModule.forRoot(routes), DataTablesModule, CommonModule],   //imports DataTablesModule here

  exports: [RouterModule]
})

export class AppRoutingModule { }

Occasion

"Error Generic type 'ɵɵDirectiveDeclaration' requires between 6 and 8 type arguments" will show when you imports DataTablesModule if you don't upgrade your angular project. Angular 14 do not work....you need angular cli 15 – Occasion

Add 2 links in your index.html head section : <script src="code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script> <script src="cdn.datatables.net/1.13.2/js/…> – Occasion

jquery.dataTables.min.js should add...<script src="cdn.datatables.net/1.13.2/js/… is very important – Occasion

Answer 7

Check the right module from you are importing:

import { DataTablesModule } from 'angular-datatables';

Prue

Answer 8

Depending on how you've structured your angular app (if you're have shared modules), you may need to import it using forRoot so it's a treated as a singleton service: DataTablesModule.forRoot(). This did the trick for me.

Warfarin