Clash Royale CLAN TAG#URR8PPP

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

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?

5 Answers
5

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

TablesComponent

tables.module.ts

import DataTablesModule from 'angular-datatables';


And add DataTablesModule to @NgModule imports.

DataTablesModule

@NgModule

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

appComponent

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>


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.

DataTablesModule.forRoot()

import DataTablesModule from 'angular-datatables';

import DataTablesModule from 'angular-datatables';

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

DataTablesModule

whatever.module.ts

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

@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.

dtOptions

.ts

To resolve this error you must change in the package.json the dependency:
"angular-datatables": "^0.6.4",
by
"angular-datatables": "^6.0.0".

after update your package.json with the npm install command

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.