0

Im making an angular 9 project. I get an error in :

I want to create a table in angular UI in a tree view wise. But when added the tag treetable I get this error. ERROR:

Uncaught (in promise): Error: Template parse errors:
Can't bind to 'tree' since it isn't a known property of 'treetable'. ("
        </table>
        <treetable
          [ERROR ->][tree]="singleRootTree"
          [options]="treeOptions"
          (nodeClicked)="logNode($event)">
"): ng:///ReportsModule/ReportsComponent.html@91:10
Can't bind to 'options' since it isn't a known property of 'treetable'. ("
        <treetable
          [tree]="singleRootTree"
          [ERROR ->][options]="treeOptions"
          (nodeClicked)="logNode($event)">
        </treetable>
"): ng:///ReportsModule/ReportsComponent.html@92:10
'treetable' is not a known element:
1. If 'treetable' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
          </tbody>
        </table>
        [ERROR ->]<treetable
          [tree]="singleRootTree"
          [options]="treeOptions"
"): ng:///ReportsModule/ReportsComponent.html@90:8
Error: Template parse errors:
Can't bind to 'tree' since it isn't a known property of 'treetable'. ("
        </table>
        <treetable
          [ERROR ->][tree]="singleRootTree"
          [options]="treeOptions"
          (nodeClicked)="logNode($event)">
"): ng:///ReportsModule/ReportsComponent.html@91:10
Can't bind to 'options' since it isn't a known property of 'treetable'. ("
        <treetable
          [tree]="singleRootTree"
          [ERROR ->][options]="treeOptions"
          (nodeClicked)="logNode($event)">
        </treetable>
"): ng:///ReportsModule/ReportsComponent.html@92:10
'treetable' is not a known element:

HTML:

        <treetable
          [tree]="singleRootTree"
          [options]="treeOptions"
          (nodeClicked)="logNode($event)">
        </treetable>

ts file include:

treeOptions: Options<any> = {
  capitalisedHeader: true,
  highlightRowOnHover: true,
  customColumnOrder: [
    'client', 'date', 'title', 'start', 'end','price', 'total'
  ]
};
onRowClicked(row) {
  console.log('Row clicked: ', row);
  this.dataList = row;
  this._data = row;
 console.log(this.dataList)
  console.log(row.id)
}
logNode(node: Node<any>) {
  console.log(node);
}

Can I know Why im getting this error? If there is a solution please let me know.

Sachini Witharana
  • 116
  • 6

1 Answers1

0

The problem was that I hadnt imported

import { TreetableModule } from 'ng-material-treetable';

in the component module.

Also add it to import as:

@NgModule({
  imports: [
     ........,
     TreetableModule ,
     ...
  ],

  declarations: [ ReportsComponent ]
})
export class ReportsModule { }
Sachini Witharana
  • 116
  • 6