7

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.

package.json

  "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() {
  }

}
2
  • You're not declaring dataSource in your appcomponent. Mar 6, 2018 at 13:58
  • 2
    any example is gonna help. Thank you
    – George C.
    Mar 6, 2018 at 14:55

2 Answers 2

14

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
],
1
  • Thnx. Add real name user3000
    – George C.
    Jul 12, 2018 at 12:57
2

I ran in the same problem and the solution was include MatTreeModule in app.module imports

Hope that helps!!!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.