next-ucap-messenger/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html

<mat-tree
  #orgranizationTree
  [dataSource]="dataSource"
  [treeControl]="treeControl"
  class="organization-tree"
>
  <mat-nested-tree-node *matTreeNodeDef="let node">
    <li>
      <div class="mat-tree-node">{{ node.title }}</div>
    </li>
  </mat-nested-tree-node>
  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChildren">
    <li>
      <div class="mat-tree-node">
        <button
          mat-icon-button
          matTreeNodeToggle
          [attr.aria-label]="'toggle ' + node.filename"
        >
          <mat-icon class="mat-icon-rtl-mirror">
            {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
          </mat-icon>
        </button>
        {{ node.title }}
      </div>
      <ul
        [class.organization-tree-node-invisible]="!treeControl.isExpanded(node)"
      >
        <div *ngIf="treeControl.isExpanded(node)">
          <ng-container matTreeNodeOutlet></ng-container>
        </div>
      </ul>
    </li>
  </mat-nested-tree-node>
</mat-tree>