title: Angular 6 Material Tree
body: <p>I am trying to do a material angular tree based off of the <a href="https://material.angular.io/components/tree/overview" rel="nofollow noreferrer">docs</a> but seem to have run into an error that I can't seem to diagnose. Chromes gives an error that <code>Cannot read property 'children' of undefined</code> at line 8 of my HTML. It appears as though the tree gets loaded into <code>nestedDataSource</code> just fine, but it won't display anything. Admittedly, I'm not entirely sure how the Angular Material tree works so I may have just messed up the html.</p>
  
  <p>On angular 6.01</p>
  
  <p>category-picker.component.html:</p>
  
  <pre><code>&lt;mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="category-picker"&gt;
    &lt;mat-tree-node *matTreeNodeDef="let node"&gt;
      &lt;li class="mat-tree-node"&gt;
        {{node.category.name}}
      &lt;/li&gt;
    &lt;/mat-tree-node&gt;
  
    &lt;mat-nested-tree-node *matTreeNodeDef="let node; when: node.children.length"&gt;
      &lt;li&gt;
        {{node.category.name}}
        &lt;ul [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)"&gt;
          &lt;ng-container matTreeNodeOutlet&gt;&lt;/ng-container&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/mat-nested-tree-node&gt;
  &lt;/mat-tree&gt;
  </code></pre>
  
  <p>category-picker.component.ts:</p>
  
  <pre><code>import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
  import {NestedTreeControl} from '@angular/cdk/tree';
  
  import {MatSelectModule} from '@angular/material';
  import {MatTreeNestedDataSource} from '@angular/material/tree';
  
  import { DataBrokerService } from '../data-broker.service';
  import { Category } from '../datatypes'
  import { observable, of } from 'rxjs';
  
  export class CategoryNode {
    children: CategoryNode[];
    category: Category;
  }
  
  
  @Component({
    selector: 'app-category-picker',
    templateUrl: './category-picker.component.html',
    styleUrls: ['./category-picker.component.scss']
  })
  export class CategoryPickerComponent implements OnInit {
  
    // Does not follow main/sub category - just has a simple category!
    @Input() categoryID: number;
    @Output() categoryIDChange:EventEmitter&lt;number&gt; = new EventEmitter&lt;number&gt;();
  
    nestedTreeControl: NestedTreeControl&lt;CategoryNode&gt;;
  
    nestedDataSource: MatTreeNestedDataSource&lt;CategoryNode&gt;;
  
    constructor(
      private dataBrokerService: DataBrokerService
    ) { 
      this.nestedTreeControl = new NestedTreeControl(node =&gt; of(node.children));
      this.nestedDataSource = new MatTreeNestedDataSource();
    }
  
    ngOnInit() {
      this.dataBrokerService.getCategories().subscribe(categories =&gt; this.nestedDataSource.data = this.buildTree(categories));
    }
  
    onChange(){
      this.categoryIDChange.emit(this.categoryID);
    }
  
    private buildTree(categories:Category[]):CategoryNode[]{
      console.log("tree");
  
      let tree:CategoryNode[] = [];
      let map: {[s:number]: CategoryNode} = {};
  
      // Build an index of the nodes
      categories.forEach(cat =&gt; {
        map[cat.id] = {children:[], category:cat};
      });
  
      // Start adding nodes to tree 
      for (let key of Object.keys(map)){
        let catNode = map[+key];
  
        if (map[catNode.category.parent_id]){
          // Add it to the parent
          map[catNode.category.parent_id].children.push(catNode);
        }
        else{
          // Add it to root
          tree.push(catNode);
        }
      };
      console.log(tree);
      return tree;
    }
  }
  </code></pre>