Tree

mat-tree for hierarchical data display with expand/collapse and checkboxes.

Basic Tree

mat-tree with flat data source and expand/collapse toggle.

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
    <button mat-icon-button disabled></button>
    {{ node.name }}
  </mat-tree-node>
  <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
    <button mat-icon-button matTreeNodeToggle aria-label="Toggle node">
      <mat-icon class="mat-icon-rtl-mirror">
        {{ treeControl.isExpanded(node) ? "expand_more" : "chevron_right" }}
      </mat-icon>
    </button>
    {{ node.name }}
  </mat-tree-node>
</mat-tree>

Tree with Checkboxes

mat-tree with checkbox selection on each node.

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
    <button mat-icon-button disabled></button>
    <mat-checkbox
      [checked]="checklistSelection.isSelected(node)"
      (change)="checklistSelection.toggle(node)"
      (click)="$event.stopPropagation()">
      {{ node.name }}
    </mat-checkbox>
  </mat-tree-node>
  <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
    <button mat-icon-button matTreeNodeToggle aria-label="Toggle node">
      <mat-icon>
        {{ treeControl.isExpanded(node) ? "expand_more" : "chevron_right" }}
      </mat-icon>
    </button>
    <mat-checkbox
      [checked]="descendantsAllSelected(node)"
      [indeterminate]="descendantsPartiallySelected(node)"
      (change)="itemSelectionToggle(node)">
      {{ node.name }}
    </mat-checkbox>
  </mat-tree-node>
</mat-tree>
 />