next-ucap-messenger/projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.html

<div fxFlex fxLayout="row" class="chatroom-search">
  <div fxLayout="row" fxLayoutAlign="start center" class="input search-form">
    <form [formGroup]="fgSearch" class="w-100-p">
      <mat-form-field floatLabel="never">
        <input
          matInput
          #inputSearch
          type="text"
          placeholder="대화방 내용 검색"
          value=""
          formControlName="searchInput"
          (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>
      <span class="text-amount">{{ curIndex }} / {{ totalCount }}</span>
    </form>
  </div>
  <div class="btns">
    <button mat-stroked-button (click)="onClickSearchAndPrev()">
      <span class="mdi mdi-arrow-up-bold-box-outline mid-18px"></span>
    </button>
    <button mat-stroked-button (click)="onClickPrevSearch()">
      <span class="mdi mdi-arrow-up-bold mid-18px"></span>
    </button>
    <button mat-stroked-button (click)="onClickNextSearch()">
      <span class="mdi mdi-arrow-down-bold mid-18px"></span>
    </button>
  </div>
</div>