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

<div>
  <mat-form-field>
    <input
      matInput
      #inputSearch
      type="text"
      maxlength="20"
      placeholder="대화방 이름 검색"
      value=""
      (keydown.enter)="onKeyDownEnter(inputSearch.value)"
    />
    <button
      mat-button
      matSuffix
      mat-icon-button
      aria-label="Clear"
      (click)="inputSearch.value = ''; searchWord = ''; isSearch = false"
    >
      <mat-icon>close</mat-icon>
    </button>
  </mat-form-field>
</div>
<div>
  <ucap-room-list-item
    *ngFor="let room of getRoomList()"
    [loginRes]="loginRes"
    [roomInfo]="room"
    [roomUserInfo]="getRoomUserList(room)"
    [sessionVerinfo]="sessionVerinfo"
    (click)="onSelectedRoom(room)"
    (contextmenu)="onContextMenuChat($event, room)"
  >
  </ucap-room-list-item>
</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">
  <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>