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

<mat-accordion #groupAccordion="matAccordion" [multi]="true">
  <mat-expansion-panel *ngFor="let groupBuddy of groupBuddyList">
    <mat-expansion-panel-header>
      <mat-panel-title> {{ groupBuddy.group.name }} </mat-panel-title>
      <mat-panel-description> </mat-panel-description>
    </mat-expansion-panel-header>

    <button
      mat-button
      class="contact"
      *ngFor="let buddy of groupBuddy.buddyList"
      (click)="onClickBuddy(buddy)"
      [@animate]="{ value: '*', params: { y: '100%' } }"
    >
      <div fxLayout="row" fxLayoutAlign="start center">
        <div
          class="avatar-wrapper"
          fxFlex="0 1 auto"
          fxLayoutAlign="center center"
        >
          <img class="avatar" />
        </div>

        <div fxLayout="row" fxFlex>
          <div
            class="pr-4"
            fxFlex
            fxLayout="column"
            fxLayoutAlign="center start"
          >
            <div class="contact-name">{{ buddy.name }}</div>
            <div class="contact-last-message">{{ buddy.name }}</div>
          </div>

          <div fxLayout="column" fxLayoutAlign="start end">
            <div class="contact-last-message-time">
              {{ buddy.name }}
            </div>
          </div>
        </div>
      </div>
    </button>
  </mat-expansion-panel>
</mat-accordion>