Can't bind to 'rows' since it isn't a known property of 'ngx-datatable'.

I’m submitting a … (check one with “x”)

[X ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior I get a run time error with the following error - ‘ngx-datatable’ is not a known element:

Expected behavior Is that the application would render grid

Reproduction of the problem I followed the direction on this page https://swimlane.gitbooks.io/ngx-datatable/content/introduction/getting-started.html to install the component.

What is the motivation / use case for changing the behavior? Not sure if there is something I am doing wrong or if there is a bug

• Table version: 0.8.x 8.0.0

• Angular version: 2.0.x 4.0.1

Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] IE, Chrome, FireFox - would expect same behavior from other browsers

Language: TypeScript 2.0.3, Angular 4

Steps -

Had working running application Used npm to download Angular 4 Used npm to download ngx-datatable Followed the direction from here https://swimlane.gitbooks.io/ngx-datatable/content/introduction/getting-started.html to install the component. Compiles but get the runtime error

Full Error: Can’t bind to ‘rows’ since it isn’t a known property of ‘ngx-datatable’.

1. If ‘ngx-datatable’ is an Angular component and it has ‘rows’ input, then verify that it is part of this module.
2. If ‘ngx-datatable’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component. (" </div> </div>--> <ngx-datatable [ERROR ->][rows]="rows" [columns]="columns"> </ngx-datatable>

"): ng:///AdminModule/AdminComponent.html@659:19 Can’t bind to ‘columns’ since it isn’t a known property of ‘ngx-datatable’.

1. If ‘ngx-datatable’ is an Angular component and it has ‘columns’ input, then verify that it is part of this module.
2. If ‘ngx-datatable’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component. (" </div>--> <ngx-datatable [rows]="rows" [ERROR ->][columns]="columns"> </ngx-datatable>

</div> "): ng:///AdminModule/AdminComponent.html@660:19 'ngx-datatable' is not a known element: 1. If 'ngx-datatable' is an Angular component, then verify that it is part of this module. 2. If 'ngx-datatable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" </div> </div>--> [ERROR ->]<ngx-datatable [rows]="rows" [columns]="columns"> </ngx-datatable> "): ng:///AdminModule/AdminComponent.html@659:4 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors: Can't bind to 'rows' since it isn't a known property of 'ngx-datatable'. 1. If 'ngx-datatable' is an Angular component and it has 'rows' input, then verify that it is part of this module. 2. If 'ngx-datatable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" </div> </div>--> <ngx-datatable [ERROR ->][rows]="rows" [columns]="columns"> </ngx-datatable> "): ng:///AdminModule/AdminComponent.html@659:19 Can't bind to 'columns' since it isn't a known property of 'ngx-datatable'. 1. If 'ngx-datatable' is an Angular component and it has 'columns' input, then verify that it is part of this module. 2. If 'ngx-datatable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" </div>--> <ngx-datatable [rows]="rows" [ERROR ->][columns]="columns"> </ngx-datatable> </div> "): ng:///AdminModule/AdminComponent.html@660:19 'ngx-datatable' is not a known element: 1. If 'ngx-datatable' is an Angular component, then verify that it is part of this module. 2. If 'ngx-datatable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" </div> </div>--> [ERROR ->]<ngx-datatable [rows]="rows" [columns]="columns"> </ngx-datatable> "): ng:///AdminModule/AdminComponent.html@659:4 at syntaxError (http://localhost:8080/dist/app.bundle.js:56812:34) [<root>] at TemplateParser.parse (http://localhost:8080/dist/app.bundle.js:66821:19) [<root>] at JitCompiler._compileTemplate (http://localhost:8080/dist/app.bundle.js:80539:39) [<root>] at http://localhost:8080/dist/app.bundle.js:80463:62 [<root>] at Set.forEach (native) [<root>] at JitCompiler._compileComponents (http://localhost:8080/dist/app.bundle.js:80463:19) [<root>] at createResult (http://localhost:8080/dist/app.bundle.js:80348:19) [<root>] at Zone.run (http://localhost:8080/dist/app.bundle.js:107191:43) [<root> => <root>] at http://localhost:8080/dist/app.bundle.js:107826:57 [<root>] at Zone.runTask (http://localhost:8080/dist/app.bundle.js:107231:47) [<root> => <root>] at drainMicroTaskQueue (http://localhost:8080/dist/app.bundle.js:107659:35) [<root>] Error: Template parse errors: Can't bind to 'rows' since it isn't a known property of 'ngx-datatable'. 1. If 'ngx-datatable' is an Angular component and it has 'rows' input, then verify that it is part of this module. 2. If 'ngx-datatable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" </div> </div>--> <ngx-datatable [ERROR ->][rows]="rows" [columns]="columns"> </ngx-datatable> "): ng:///AdminModule/AdminComponent.html@659:19 Can't bind to 'columns' since it isn't a known property of 'ngx-datatable'. 1. If 'ngx-datatable' is an Angular component and it has 'columns' input, then verify that it is part of this module. 2. If 'ngx-datatable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" </div>--> <ngx-datatable [rows]="rows" [ERROR ->][columns]="columns"> </ngx-datatable> </div> "): ng:///AdminModule/AdminComponent.html@660:19 'ngx-datatable' is not a known element: 1. If 'ngx-datatable' is an Angular component, then verify that it is part of this module. 2. If 'ngx-datatable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" </div> </div>--> [ERROR ->]<ngx-datatable [rows]="rows" [columns]="columns"> </ngx-datatable> "): ng:///AdminModule/AdminComponent.html@659:4 at syntaxError (http://localhost:8080/dist/app.bundle.js:56812:34) [<root>] at TemplateParser.parse (http://localhost:8080/dist/app.bundle.js:66821:19) [<root>] at JitCompiler._compileTemplate (http://localhost:8080/dist/app.bundle.js:80539:39) [<root>] at http://localhost:8080/dist/app.bundle.js:80463:62 [<root>] at Set.forEach (native) [<root>] at JitCompiler._compileComponents (http://localhost:8080/dist/app.bundle.js:80463:19) [<root>] at createResult (http://localhost:8080/dist/app.bundle.js:80348:19) [<root>] at Zone.run (http://localhost:8080/dist/app.bundle.js:107191:43) [<root> => <root>] at http://localhost:8080/dist/app.bundle.js:107826:57 [<root>] at Zone.runTask (http://localhost:8080/dist/app.bundle.js:107231:47) [<root> => <root>] at drainMicroTaskQueue (http://localhost:8080/dist/app.bundle.js:107659:35) [<root>] consoleError @ zone.js:569 handleUnhandledRejection @ zone.js:574 _loop_1 @ zone.js:609 drainMicroTaskQueue @ zone.js:613 zone.js:571 Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'rows' since it isn't a known property of 'ngx-datatable'. 1. If 'ngx-datatable' is an Angular component and it has 'rows' input, then verify that it is part of this module. 2. If 'ngx-datatable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" </div> </div>--> <ngx-datatable [ERROR ->][rows]="rows" [columns]="columns"> </ngx-datatable> "): ng:///AdminModule/AdminComponent.html@659:19 Can't bind to 'columns' since it isn't a known property of 'ngx-datatable'. 1. If 'ngx-datatable' is an Angular component and it has 'columns' input, then verify that it is part of this module. 2. If 'ngx-datatable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" </div>--> <ngx-datatable [rows]="rows" [ERROR ->][columns]="columns"> </ngx-datatable> </div> "): ng:///AdminModule/AdminComponent.html@660:19 'ngx-datatable' is not a known element: 1. If 'ngx-datatable' is an Angular component, then verify that it is part of this module. 2. If 'ngx-datatable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" </div> </div>--> [ERROR ->]<ngx-datatable [rows]="rows" [columns]="columns"> </ngx-datatable> "): ng:///AdminModule/AdminComponent.html@659:4 Error: Template parse errors: Can't bind to 'rows' since it isn't a known property of 'ngx-datatable'. 1. If 'ngx-datatable' is an Angular component and it has 'rows' input, then verify that it is part of this module. 2. If 'ngx-datatable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" </div> </div>--> <ngx-datatable [ERROR ->][rows]="rows" [columns]="columns"> </ngx-datatable> "): ng:///AdminModule/AdminComponent.html@659:19 Can't bind to 'columns' since it isn't a known property of 'ngx-datatable'. 1. If 'ngx-datatable' is an Angular component and it has 'columns' input, then verify that it is part of this module. 2. If 'ngx-datatable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" </div>--> <ngx-datatable [rows]="rows" [ERROR ->][columns]="columns"> </ngx-datatable> </div> "): ng:///AdminModule/AdminComponent.html@660:19 'ngx-datatable' is not a known element: 1. If 'ngx-datatable' is an Angular component, then verify that it is part of this module. 2. If 'ngx-datatable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" </div> </div>--> [ERROR ->]<ngx-datatable [rows]="rows" [columns]="columns"> </ngx-datatable> "): ng:///AdminModule/AdminComponent.html@659:4 at syntaxError (http://localhost:8080/dist/app.bundle.js:56812:34) [<root>] at TemplateParser.parse (http://localhost:8080/dist/app.bundle.js:66821:19) [<root>] at JitCompiler._compileTemplate (http://localhost:8080/dist/app.bundle.js:80539:39) [<root>] at http://localhost:8080/dist/app.bundle.js:80463:62 [<root>] at Set.forEach (native) [<root>] at JitCompiler._compileComponents (http://localhost:8080/dist/app.bundle.js:80463:19) [<root>] at createResult (http://localhost:8080/dist/app.bundle.js:80348:19) [<root>] at Zone.run (http://localhost:8080/dist/app.bundle.js:107191:43) [<root> => <root>] at http://localhost:8080/dist/app.bundle.js:107826:57 [<root>] at Zone.runTask (http://localhost:8080/dist/app.bundle.js:107231:47) [<root> => <root>] at drainMicroTaskQueue (http://localhost:8080/dist/app.bundle.js:107659:35) [<root>] at syntaxError (http://localhost:8080/dist/app.bundle.js:56812:34) [<root>] at TemplateParser.parse (http://localhost:8080/dist/app.bundle.js:66821:19) [<root>] at JitCompiler._compileTemplate (http://localhost:8080/dist/app.bundle.js:80539:39) [<root>] at http://localhost:8080/dist/app.bundle.js:80463:62 [<root>] at Set.forEach (native) [<root>] at JitCompiler._compileComponents (http://localhost:8080/dist/app.bundle.js:80463:19) [<root>] at createResult (http://localhost:8080/dist/app.bundle.js:80348:19) [<root>] at Zone.run (http://localhost:8080/dist/app.bundle.js:107191:43) [<root> => <root>] at http://localhost:8080/dist/app.bundle.js:107826:57 [<root>] at Zone.runTask (http://localhost:8080/dist/app.bundle.js:107231:47) [<root> => <root>] at drainMicroTaskQueue (http://localhost:8080/dist/app.bundle.js:107659:35) [<root>] at resolvePromise (http://localhost:8080/dist/app.bundle.js:107778:31) [<root>] at resolvePromise (http://localhost:8080/dist/app.bundle.js:107749:17) [<root>] at http://localhost:8080/dist/app.bundle.js:107826:17 [<root>] at Zone.runTask (http://localhost:8080/dist/app.bundle.js:107231:47) [<root> => <root>] at drainMicroTaskQueue (http://localhost:8080/dist/app.bundle.js:107659:35) [<root>]

[kalyandas]

I could fix the issue. May seem strange but it worked like this. My app is multi-modular , I imported NgxDatatableModule in the root module and it was giving me the error. I then imported it in the child module , it worked 😃

[sac-cas]

@PeterSawyer:

did you import NgxDatatableModule to your *.spec.ts?

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent],
      imports: [
        NgxDatatableModule ]