Angular 4 and ngx-datatable: 'ngx-datatable' is not a known element
Solution 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>
Solution 2
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.
Solution 3
I had the same problem that was solved by running
ng update
I am not sure what was wrong though.
![Thomas Schneiter](https://i.stack.imgur.com/wwFge.jpg?s=256&g=1)
Comments
-
Thomas Schneiter about 2 years
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", ...