Can't bind to 'theme' since it isn't a known property of 'jqxTree'

Question

I am using jqxTreeComponent in angular 7 after running below code and cofiguring some setting i am getting this error when doing ng serve.

npm install jqwidgets-scripts --save

I am getting this error when doing ng serve. this is my compoenent template code :

 <div class="tree-container">
          <jqxTree class="tree-container--item" [theme]="'material'" #myTree [width]="300" [height]="450" [source]="records"
            [rtl]="true">
          </jqxTree>
          <div class="tree-container--item">
            <div fxLayout="row">
              <jqxButton [theme]="'material'" (onClick)="AddNode($event)" [width]="125" [height]="25">add</jqxButton>
              <input [(ngModel)]="nodeName"  *ngIf="showTextBox" placeholder="add" />
            </div>
</div>

in addition i added below code in ts file of my component (of course in right place!!)

import { jqxTreeComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxtree';
@ViewChild('myTree') myTree: jqxTreeComponent;

beside this step i added two component in decleration section in app.module.ts file:

import { jqxButtonComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxbuttons';
import { jqxTreeComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxtree';


  jqxButtonComponent, jqxTreeComponent

and as final step i added below code to my tscodfig file:

 "include": [
        "src/**/*"
    ],
    "files": [
        "src/app/app.module.ts",
        "node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxbuttons.ts",
        "node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxtree.ts"
    ]

Everything seems to be right now i want to know what is the problem??!!!

make sure that `AppModule` is the closest module to that component, otherwise, declare `jqxTreeComponent` in a closest/ shared module in case you have multiple modules — Tushar Walzade, Feb 26 '19 at 13:32

Bibin Philip · Answer 1 · 2019-03-21T15:42:05.237

I have few suggestions please try, hope it helps

Make a JqxWidgetsModule

import { jqxButtonComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxbuttons';
import { jqxTreeComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxtree';

@NgModule({
declarations: [ jqxButtonComponent, jqxTreeComponent],
exports: [ jqxButtonComponent, jqxTreeComponent]
})
export class JqxWidgetsModule { }

Import this module in your LocationModule

    @NgModule({
  declarations: [...],
  imports: [
    CommonModule,
    LocationRoutingModule,
    JqxWidgetsModule
  ]
})
export class LocationModule { }

In tsconfig.json file after compilerOptions property add the below config:

"include": [ "src/**/*.ts", "node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxbuttons.ts", "node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxtree.ts" ]

Can't bind to 'theme' since it isn't a known property of 'jqxTree'

1 Answers1