I try to use ngx-datatable in my angular 4 project using system.js to load the module, but it throws errors like this:

Can't bind to 'rows' since it isn't a known property of ngx-datatable.
Can't bind to 'columns' since it isn't a known property of ngx-datatable.
ngx-datatable is not a known element:

I guess system.js does not load the module correctly but i can't find a working demo on how to do this. The documentation is not helpful either.

system.config.js:

map: {
     ...
     '@swimlane/ngx-datatable': 'npm:@swimlane/ngx-datatable/release/index.js',
     ...
}

app.module.ts:

import { NgxDatatableModule } from '@swimlane/ngx-datatable';
...
imports: [
    ...
    NgxDatatableModule,
    ...
],

component.html:

<ngx-datatable
     [rows]="rows"
     [columns]="columns">
</ngx-datatable>

component.ts:

rows = [
    { name: 'Austin', gender: 'Male', company: 'Swimlane' },
    { name: 'Dany', gender: 'Male', company: 'KFC' },
    { name: 'Molly', gender: 'Female', company: 'Burger King' },
];
columns = [
    { prop: 'name' },
    { name: 'Gender' },
    { name: 'Company' }
];

package.json:

...
"@angular/animations": "^4.3.0",
"@angular/common": "^4.3.0",
"@angular/compiler": "^4.3.0",
"@angular/compiler-cli": "^4.3.0",
"@angular/core": "^4.3.0",
"@angular/forms": "^4.3.0",
"@angular/http": "^4.3.0",
"@angular/platform-browser": "^4.3.0",
"@angular/platform-browser-dynamic": "^4.3.0",
"@angular/platform-server": "^4.3.0",
"@angular/router": "^4.3.0",
"@angular/upgrade": "4.3.0",
"@swimlane/ngx-datatable": "^9.3.1",
...

I try to use ngx-datatable in my angular 4 project using system.js to load the module, but it throws errors like this:

Can't bind to 'rows' since it isn't a known property of ngx-datatable.
Can't bind to 'columns' since it isn't a known property of ngx-datatable.
ngx-datatable is not a known element:

I guess system.js does not load the module correctly but i can't find a working demo on how to do this. The documentation is not helpful either.

system.config.js:

map: {
     ...
     '@swimlane/ngx-datatable': 'npm:@swimlane/ngx-datatable/release/index.js',
     ...
}

app.module.ts:

import { NgxDatatableModule } from '@swimlane/ngx-datatable';
...
imports: [
    ...
    NgxDatatableModule,
    ...
],

component.html:

<ngx-datatable
     [rows]="rows"
     [columns]="columns">
</ngx-datatable>

component.ts:

rows = [
    { name: 'Austin', gender: 'Male', company: 'Swimlane' },
    { name: 'Dany', gender: 'Male', company: 'KFC' },
    { name: 'Molly', gender: 'Female', company: 'Burger King' },
];
columns = [
    { prop: 'name' },
    { name: 'Gender' },
    { name: 'Company' }
];

package.json:

...
"@angular/animations": "^4.3.0",
"@angular/common": "^4.3.0",
"@angular/compiler": "^4.3.0",
"@angular/compiler-cli": "^4.3.0",
"@angular/core": "^4.3.0",
"@angular/forms": "^4.3.0",
"@angular/http": "^4.3.0",
"@angular/platform-browser": "^4.3.0",
"@angular/platform-browser-dynamic": "^4.3.0",
"@angular/platform-server": "^4.3.0",
"@angular/router": "^4.3.0",
"@angular/upgrade": "4.3.0",
"@swimlane/ngx-datatable": "^9.3.1",
...

• javascript
• angular
• datatable
• systemjs
• ngx-datatable

• did you run npm install? – Francesco Borzi Commented Sep 4, 2017 at 14:49

4 Answers 4

I installed it running properly for me. Please refer this link

Please import in App.module.ts like below:

    import { NgxDatatableModule } from '@swimlane/ngx-datatable';
@NgModule({
  imports: [
    NgxDatatableModule]});

Please see the App.component.html

 <ngx-datatable class="material"
            [rows]="rows"
            [columns]="column">
          </ngx-datatable>

In the brackets, try to add attr before rows or any other attribute. It should be like this [attr.rows]="rows"and [attr.columns]="columns" and so on.

I had the same problem that was solved by running

ng update

I am not sure what was wrong though.

I got it working using this approach

1. add ref to the HTML code

   <ngx-datatable #myTable [rows]="rows" [columns]="columns">

2. import { DatatableComponent } from '@swimlane/ngx-datatable';

3. @ViewChild('myTable') myTable!: DatatableComponent;

Do not forget to import ViewChild from '@angular/core';