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

<cdk-virtual-scroll-viewport
  #cvsvGroup
  itemSize="80"
  perfectScrollbar
  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" style="height: 80px;" matRipple>
      <li>
        <div class="mat-tree-node">
          <ng-container
            [ngTemplateOutlet]="expansionPanelItemTemplateRef"
            [ngTemplateOutletContext]="{
              $implicit: node?.userInfo,
              group: node?.groupDetail
            }"
          >
          </ng-container>
        </div>
      </li>
    </mat-tree-node>
    <!-- This is the tree node template for expandable nodes -->
    <mat-tree-node
      *matTreeNodeDef="let node; when: isHeader"
      class="tree-node-frame"
      style="height: 80px;"
      matRipple
    >
      <li class="tree-node-header" matTreeNodeToggle>
        <div class="path">
          <button
            mat-icon-button
            [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">내 프로필</span>
            <span *ngSwitchCase="NodeType.Favorit"
              >즐겨찾기
              <span class="text-accent-color number"
                >({{ node.countOfChildren }}명)</span
              ></span
            >
            <span *ngSwitchCase="NodeType.Buddy">
              <span class="title-name ellipsis">{{
                node.groupDetail.name
              }}</span>
              <span class="text-accent-color number"
                >({{ node.countOfChildren }}명)</span
              >
            </span>
          </ng-container>

          <button
            mat-icon-button
            aria-label="group menu"
            *ngIf="node.nodeType !== NodeType.Profile"
            (click)="onClickMore($event, node.groupDetail)"
            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>