Error while trying make a button collapse/expand Angular Material Nested Tree

Question

I have a Angular Material Nested tree. I'm trying to create a button to expand/collapse, but I'm getting the following error:
ERROR TypeError: Cannot read property 'reduce' of undefined

I have tried it using HTML:

<button (click)="ahtree.treeControl.collapseAll()">collapseAll</button>

<button (click)="treeControl.expandAll()">expandAll</button>


<mat-tree #ahtree [dataSource]="AccountRelTypeTreeDataSource" [treeControl]="treeControl" class="example-tree">
  <!-- This is the tree node template for leaf nodes -->
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
    <li class="mat-tree-node">
      <!-- use a disabled button to provide padding for tree leaf -->
      <button mat-icon-button disabled></button>
      <p">{{node.displayName}}</p>
    </li>
  </mat-tree-node>
  // The rest...
  ...

Or with typescript:

  // Trees:
  @ViewChild('ahtree') ahtree;
  selectedTab = 0;

  // Datasource
  treeControl = new NestedTreeControl<TreeNode>(node => node.children);
  DataSource = new MatTreeNestedDataSource<TreeNode>();

  ...

   ngAfterViewInit() {
    this.ahtree.treeControl.expandAll();
   }

I read https://material.angular.io/components/tree/overview#treecontrol, but I still don't seem to get it to work.

Does anyone know how to do this with a Nested Tree?

gbuys gbuys · Accepted Answer · 2019-06-22T21:18:12

You didn't show the full stack trace, but I suppose the error is the same one as described in this Github ticket. The solution given by user devversion worked for me. See this anchor in the same ticket.

Error while trying make a button collapse/expand Angular Material Nested Tree

1 Answers