next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html

<!--<div class="app-layout-chat-left-sidenav-chat-header list-search">
  <form [formGroup]="fgSearch">
    <mat-form-field class="w-100-p searchbox" floatLabel="never">
      <input
        matInput
        #inputSearch
        type="text"
        maxlength="20"
        placeholder="대화방 이름 검색"
        value=""
        formControlName="searchInput"
        [matAutocomplete]="auto"
        (keydown.enter)="onKeyDownEnter($event, inputSearch.value)"
      />
      <mat-autocomplete #auto="matAutocomplete">
        <mat-option
          *ngFor="let filteredRecommendedWord of filteredRecommendedWordList"
          [value]="filteredRecommendedWord"
        >
          {{ filteredRecommendedWord }}
        </mat-option>
      </mat-autocomplete>

      <button
        mat-button
        matSuffix
        mat-icon-button
        aria-label="Clear"
        (click)="inputSearch.value = ''; onClickSearchCancel()"
      >
        <mat-icon>close</mat-icon>
      </button>
    </mat-form-field>
  </form>-->

<div class="list-search">
  <div class="searchbox">
    <form [formGroup]="fgSearch" class="w-100-p">
      <mat-form-field floatLabel="never">
        <input
          matInput
          #inputSearch
          type="text"
          maxlength="20"
          placeholder="대화방 이름 검색"
          value=""
          formControlName="searchInput"
          [matAutocomplete]="auto"
          (keydown.enter)="onKeyDownEnter($event, inputSearch.value)"
        />
        <button
          mat-button
          matSuffix
          mat-icon-button
          aria-label="Clear"
          (click)="inputSearch.value = ''; onClickSearchCancel()"
        >
          <mat-icon>close</mat-icon>
        </button>
      </mat-form-field>
    </form>
  </div>
</div>

<div
  *ngIf="!isSearch"
  class="app-layout-chat-left-sidenav-chat-list"
  perfectScrollbar
>
  <ucap-room-list-item
    *ngFor="let room of roomList"
    [loginRes]="loginRes"
    [roomInfo]="room"
    [roomUserInfo]="getRoomUserList(room)"
    [sessionVerinfo]="sessionVerinfo"
    (click)="onSelectedRoom(room)"
    (contextmenu)="onContextMenuChat($event, room)"
  >
  </ucap-room-list-item>
  <!-- <cdk-virtual-scroll-viewport
    itemSize="20"
    class="app-layout-chat-left-sidenav-chat-list-viewport"
  >
    <ucap-room-list-item
      *cdkVirtualFor="let room of getRoomList()"
      [loginRes]="loginRes"
      [roomInfo]="room"
      [roomUserInfo]="getRoomUserList(room)"
      [sessionVerinfo]="sessionVerinfo"
      (click)="onSelectedRoom(room)"
      (contextmenu)="onContextMenuChat($event, room)"
    >
    </ucap-room-list-item>
  </cdk-virtual-scroll-viewport> -->
</div>
<div
  *ngIf="!!isSearch"
  class="app-layout-chat-left-sidenav-chat-list search"
  perfectScrollbar
>
  <ucap-room-list-item
    *ngFor="let room of searchRoomList"
    [loginRes]="loginRes"
    [roomInfo]="room"
    [roomUserInfo]="getRoomUserList(room)"
    [sessionVerinfo]="sessionVerinfo"
    (click)="onSelectedRoom(room)"
    (contextmenu)="onContextMenuChat($event, room)"
  >
  </ucap-room-list-item>
  <!-- <cdk-virtual-scroll-viewport
    itemSize="20"
    class="app-layout-chat-left-sidenav-chat-list-viewport"
  >
    <ucap-room-list-item
      *cdkVirtualFor="let room of getRoomList()"
      [loginRes]="loginRes"
      [roomInfo]="room"
      [roomUserInfo]="getRoomUserList(room)"
      [sessionVerinfo]="sessionVerinfo"
      (click)="onSelectedRoom(room)"
      (contextmenu)="onContextMenuChat($event, room)"
    >
    </ucap-room-list-item>
  </cdk-virtual-scroll-viewport> -->
</div>

<div
  style="visibility: hidden; position: fixed"
  [style.left]="chatContextMenuPosition.x"
  [style.top]="chatContextMenuPosition.y"
  #chatContextMenuTrigger="matMenuTrigger"
  [matMenuTriggerFor]="chatContextMenu"
></div>
<mat-menu
  #chatContextMenu="matMenu"
  [hasBackdrop]="false"
  (ucapUiClickOutside)="chatContextMenuTrigger.closeMenu()"
>
  <ng-template matMenuContent let-roomInfo="roomInfo">
    <button mat-menu-item (click)="onSelectedRoom(roomInfo)">
      대화방 열기
    </button>
    <button mat-menu-item (click)="onClickToggleAlarm(roomInfo)">
      대화방 알람 {{ roomInfo.receiveAlarm ? '끄기' : '켜기' }}
    </button>
    <button mat-menu-item (click)="onClickExit(roomInfo)">
      대화방 나가기
    </button>
  </ng-template>
</mat-menu>