Can't bind to 'dataSource' since it isn't a known property of 'mat-tree'

Question

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

}

Solution 1

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
],

Solution 2

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

Hope that helps!!!

Comments

[George C.]

Thnx. Add real name user3000