Select with search inside a modal is not working

It looks like you are using sample modal code from MDB Standard. In Angular you don't need to create those two divs at the top:

<div class="modal fade" id="selectOptionPopup">
<div class="modal-dialog modal-lg data-item-modal">

Please try such structure:

<div class="modal-content" id="selectOptionPopup">
  <div class="modal-header">
    <h4 class="modal-title">Edit Option</h4>
  </div>
  <div class="modal-body">
    <div class="showSelect-Dropdown">
      <mdb-form-control>
        <mdb-select [filter]="true">
          <mdb-option *ngFor="let option of options" [value]="option.value">
            {{ option.label }}
          </mdb-option>
        </mdb-select>
        <label mdbLabel class="form-label">Test label</label>
      </mdb-form-control>
    </div>
  </div>
</div>

If you want to add .modal-lg class to modal you do it by adding an options object with modalClass property into your openModal method like this:

  openModal() {
    this.modalRef = this.modalService.open(ModalComponent, {
      modalClass: 'modal-lg',
    });
  }

If data-item-modal class is important for you and it provides some styling you can add it also via modalClass option

  openModal() {
    this.modalRef = this.modalService.open(ModalComponent, {
      modalClass: 'modal-lg data-item-modal',
    });
  }