next-ucap-messenger/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html

<cdk-virtual-scroll-viewport #cvsvGroup itemSize="80" fxFlexFill>
  <ng-container
    *cdkVirtualFor="let node of dataSource.expandedData$"
  ></ng-container>
  <mat-tree
    #groupTree
    [dataSource]="dataSource"
    [treeControl]="treeControl"
    class="group-tree"
  >
    <!-- This is the tree node template for leaf nodes -->
    <mat-tree-node *matTreeNodeDef="let node">
      <li>
        <div class="mat-tree-node">
          <ng-container
            [ngTemplateOutlet]="expansionPanelItemTemplateRef"
            [ngTemplateOutletContext]="{ $implicit: node?.userInfo }"
          >
          </ng-container>
          <!--{{ node?.userInfo?.name }}-->
        </div>
      </li>
    </mat-tree-node>
    <!-- This is the tree node template for expandable nodes -->
    <mat-tree-node
      *matTreeNodeDef="let node; when: hasChild"
      class="tree-node-frame"
    >
      <li>
        <div  class="path">
          <button
            mat-icon-button
            matTreeNodeToggle
            [attr.aria-label]="'toggle '"
            class="btn-toggle"
          >
            <mat-icon class="mat-icon-rtl-mirror">
              {{ treeControl.isExpanded(node) ? 'expand_less' : 'expand_more' }}
            </mat-icon>
          </button>
          <ng-container [ngSwitch]="node.nodeType">
            <span *ngSwitchCase="NodeType.Profile">Profile</span>
            <span *ngSwitchCase="NodeType.Favorit">Favorit</span>
            <span *ngSwitchCase="NodeType.Buddy">Buddy</span>
          </ng-container>
          <button mat-icon-button aria-label="group menu" *ngIf="!checkable" (click)="onClickMore($event, groupBuddy.group)" class="group-menu">
            <mat-icon>more_vert</mat-icon>
          </button>
        </div>
        <ul [class.group-tree-node-invisible]="!treeControl.isExpanded(node)">
          <div *ngIf="treeControl.isExpanded(node)" class="boxnone">
            <div class="vertical-line"></div>
            <ng-container matTreeNodeOutlet></ng-container>
          </div>
        </ul>
      </li>
    </mat-tree-node>
  </mat-tree>
</cdk-virtual-scroll-viewport>