Components

Tree

Angular Material Tree displays hierarchical data, useful for visualizing nested structures like file systems or grouped content.

Official docs API reference

Example

Below is an example of how BuilderKit restyles the Angular Material Tree and gives it a more modern appearance.

Fruit

Vegetables

<mat-tree [dataSource]="dataSource" [childrenAccessor]="childrenAccessor" #tree>
  <mat-nested-tree-node *matTreeNodeDef="let node">{{ node.name }}</mat-nested-tree-node>
  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodeToggle>
    <div class="mat-tree-node">
      <button matIconButton matTreeNodeToggle>
        <mat-icon [svgIcon]="tree.isExpanded(node) ? 'chevron-down' : 'chevron-right'" />
      </button>
      <div>{{ node.name }}</div>
    </div>
    <div [class.hidden]="!tree.isExpanded(node)">
      <ng-container matTreeNodeOutlet></ng-container>
    </div>
  </mat-nested-tree-node>
</mat-tree>