Show mat-table data based on selected mat-tree node

Question

I am using Mat-tree to show some hierarchical data. I want to use also a mat-table on the right side of my tree. When I click on any tree node, the table should show the child node of the selected tree node. So on every click on the left side tree node, the table data should be updated with respective children.

Below is my sample code, where I am unable to get the node names.

app.component.html

     <div class="main-wrap">
                <div class="tree-div">
      <mat-tree [dataSource]="dataSource" [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>
            {{node.name}}
          </li>
        </mat-tree-node>
        <!-- This is the tree node template for expandable nodes -->
        <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
          <li>
            <div class="mat-tree-node">
              <button mat-icon-button matTreeNodeToggle
                      [attr.aria-label]="'toggle ' + node.name">
                <mat-icon class="mat-icon-rtl-mirror">
                  {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                </mat-icon>
              </button>
              {{node.name}}
            </div>
            <ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
              <ng-container matTreeNodeOutlet></ng-container>
            </ul>
          </li>
        </mat-nested-tree-node>
      </mat-tree>
    </div>
    <div>
      <div *ngIf="hasChild">
          {{node.name}}
      </div>
    </div>

Dino Dino · Accepted Answer · 2019-07-09T10:47:19

You could create a very simple logic of adding the click function to your tree nodes. Basically, when ever you click on a node, the function will be called - and it will set your table data with nodes children.

<tree-node (click)="showChildren(node)">

showChildren(node) {
    this.tableDataSource = node.children;
}

You can add this function to elements of your own preference. For example <li> or <button>. As long as the element has a reference to node, you are fine.

Show mat-table data based on selected mat-tree node

1 Answers