For some reason, I get this error
Can't bind to 'dataSource' since it isn't a known property of 'mat-tree'.
and I don't know how to fix that
I try to use angular material 2 6.0.0-beta.3 where this version have treeview component for first time, any help to fix this error is gonna help.
"dependencies": {
"@angular/animations": "^6.0.0-beta.5",
"@angular/cdk": "^6.0.0-beta.4",
"@angular/common": "^6.0.0-beta.5",
"@angular/compiler": "^6.0.0-beta.5",
"@angular/core": "^6.0.0-beta.5",
"@angular/flex-layout": "^2.0.0-beta.12",
"@angular/forms": "^6.0.0-beta.5",
"@angular/http": "^6.0.0-beta.5",
"@angular/material": "^6.0.0-beta.3",
"@angular/material-moment-adapter": "^6.0.0-beta.5",
"@angular/platform-browser": "^6.0.0-beta.5",
"@angular/platform-browser-dynamic": "^6.0.0-beta.5",
"@angular/router": "^6.0.0-beta.5",
"@types/three": "^0.89.6",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"moment": "^2.20.1",
"ng2-truncate": "^1.3.11",
"orbit-controls-es6": "^1.0.10",
"rxjs": "^5.5.6",
"stats.js": "^0.17.0",
"three": "^0.89.0",
"three-orbit-controls": "^82.1.0",
"zone.js": "^0.8.19"
},
app.component.html
<mat-tree [dataSource]="data" [treeControl]="tc">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
<li>
<div>
<button mat-icon-button disabled>
<mat-icon>
remove
</mat-icon>
</button>
{{node.name}}
</div>
</li>
</mat-tree-node>
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
<li>
<div class="mat-tree-node">
<button mat-icon-button matTreeNodeToggle>
<mat-icon>
{{tc.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button> {{node.name}}
</div>
<ul [hidden]="!tc.isExpanded(node)">
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</li>
</mat-nested-tree-node>
</mat-tree>
app.component.ts
import { Component, OnInit } from '@angular/core';
import { TreeControl, NestedTreeControl, FlatTreeControl } from '@angular/cdk/tree';
import { of } from 'rxjs/observable/of';
interface TestData {
name: string;
// level: number;
children?: TestData[];
}
// const GetLevel = (node: TestData) => node.level;
// const IsExpandable = (node: TestData) => node.children && node.children.length > 0;
const GetChildren = (node: TestData) => of(node.children);
// const TC = new FlatTreeControl(GetLevel, IsExpandable);
const TC = new NestedTreeControl(GetChildren);
@Component({
selector: 'app-browser',
templateUrl: './browser.component.html',
styleUrls: ['./browser.component.css']
})
export class BrowserComponent implements OnInit {
tc = TC;
data = [
{
name: 'a',
children: [
{ name: 'g' },
{
name: 'b',
children: [
{ name: 'e' },
{ name: 'f' }
]
},
{
name: 'c',
children: [
{ name: 'd' }
]
}
]
}];
hasChild(_: number, node: TestData) {
console.log(node);
return node.children != null && node.children.length > 0;
}
constructor() { }
ngOnInit() {
}
}
I think you forgot to import MatTreeModule in your module
import {MatTreeModule} from '@angular/material/tree';
and don't forget to mention in decorator also
imports: [
MatTreeModule
],
I ran in the same problem and the solution was include MatTreeModule in app.module imports
Hope that helps!!!
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