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

<mat-accordion
  #groupAccordion="matAccordion"
  [multi]="true"
  [displayMode]="'flat'"
>
  <mat-expansion-panel
    *ngIf="favoritBuddyList.length > 0 && !checkable"
    [togglePosition]="'before'"
  >
    <mat-expansion-panel-header>
      <mat-panel-title> 즐겨찾기 </mat-panel-title>
      <mat-panel-description> </mat-panel-description>
    </mat-expansion-panel-header>

    <ng-container *ngFor="let favUserList of favoritBuddyList">
      <ng-template
        [ngTemplateOutlet]="expansionPanelItemTemplateRef"
        [ngTemplateOutletContext]="{ $implicit: favUserList }"
      >
      </ng-template>
    </ng-container>
  </mat-expansion-panel>

  <mat-expansion-panel
    *ngFor="let groupBuddy of groupBuddyList"
    [togglePosition]="'before'"
    class="groupExpansionPanel"
  >
    <mat-expansion-panel-header>
      <mat-panel-title> {{ groupBuddy.group.name }} </mat-panel-title>
      <mat-panel-description>
        <span class="more-spacer"></span>
        <button
          mat-icon-button
          aria-label="group menu"
          *ngIf="!checkable"
          (click)="onClickMore($event, groupBuddy.group)"
        >
          <mat-icon>more_vert</mat-icon>
        </button>
        <mat-checkbox
          *ngIf="checkable"
          #checkbox
          [checked]="getCheckedGroup(groupBuddy)"
          (change)="onChangeCheck(checkbox.checked, groupBuddy)"
          (click)="$event.stopPropagation()"
        ></mat-checkbox>
      </mat-panel-description>
    </mat-expansion-panel-header>

    <ng-container *ngFor="let userInfo of groupBuddy.buddyList">
      <ng-template
        [ngTemplateOutlet]="expansionPanelItemTemplateRef"
        [ngTemplateOutletContext]="{ $implicit: userInfo }"
      ></ng-template>
    </ng-container>
  </mat-expansion-panel>
</mat-accordion>