next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html

<mat-card class="confirm-card">
  <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
    <mat-card-title>{{ data.title }}</mat-card-title>
  </mat-card-header>
  <mat-card-content fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div fxFlex class="container">
      <mat-tab-group mat-stretch-tabs>
        <mat-tab>
          <ng-template mat-tab-label>
            <mat-icon>group</mat-icon>
          </ng-template>

          <ucap-organization-tenant-search [companyList]="companyList$ | async" [companyCode]="companyCode"
            (keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)"></ucap-organization-tenant-search>
          <ucap-group-expansion-panel #groupExpansionPanel [groupBuddyList]="groupBuddyList$ | async"
            [favoritBuddyList]="favoritBuddyList$ | async" [checkable]="true" (checkGroup)="onCheckGroup($event)">
            <ucap-profile-user-list-item *ucapGroupExpansionPanelItem="let userInfo" [userInfo]="userInfo"
              [sessionVerinfo]="sessionVerinfo" (checkUser)="onCheckUser($event)" [checkable]="true">
            </ucap-profile-user-list-item>
          </ucap-group-expansion-panel>
        </mat-tab>
        <mat-tab>
          <ng-template mat-tab-label>
            <mat-icon>device_hub</mat-icon>
          </ng-template>
          <app-layout-chat-left-sidenav-organization></app-layout-chat-left-sidenav-organization>
        </mat-tab>
        <mat-tab>
          <ng-template mat-tab-label>
            <mat-icon>chat</mat-icon>
          </ng-template>
          <ucap-room-list-item *ngFor="let room of roomList" [loginRes]="loginRes" [roomInfo]="room"
            [roomUserInfo]="getRoomUserList(room)" [sessionVerinfo]="sessionVerinfo">
          </ucap-room-list-item>
        </mat-tab>
      </mat-tab-group>
    </div>
    <div fxFlex="100px">
      <ul>
        <li *ngFor="let userInfo of selectedUserList">
          {{ userInfo.name }}
        </li>
      </ul>
    </div>
  </mat-card-content>
  <mat-card-actions class="button-farm flex-row">
    <button mat-stroked-button (click)="onClickChoice(false)" class="mat-primary">
      No
    </button>
    <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
      Yes
    </button>
  </mat-card-actions>
</mat-card>