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

<mat-accordion #groupAccordion="matAccordion" [multi]="true">
  <mat-expansion-panel
    *ngIf="!!myProfileInfo && !checkable"
    [togglePosition]="'before'"
    class="groupExpansionPanel"
  >
    <mat-expansion-panel-header>
      <mat-panel-title>내 프로필</mat-panel-title>
      <mat-panel-description> </mat-panel-description>
    </mat-expansion-panel-header>

    <ng-container>
      <ng-template
        [ngTemplateOutlet]="expansionPanelItemTemplateRef"
        [ngTemplateOutletContext]="{ $implicit: myProfileInfo }"
      >
      </ng-template>
    </ng-container>
  </mat-expansion-panel>

  <mat-expansion-panel
    *ngIf="!!favoritBuddyList && favoritBuddyList.length > 0 && !checkable"
    [togglePosition]="'before'"
    class="groupExpansionPanel"
  >
    <mat-expansion-panel-header>
      <mat-panel-title
        >즐겨찾기
        <span>({{ favoritBuddyList.length }}명)</span></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 class="panel-title">
        <div class="title-name ellipsis">{{ groupBuddy.group.name }}</div>
        <span class="text-accent-color number">({{ groupBuddy.buddyList.length }}명)</span>
        </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>