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 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With