How to add extra custom button in primng dropdown box Angular

Question

Im using primeng for Angular UI component library, and i want to know how to add extra custom button in primng dropdown box (not in its dialog box). ex:- In the spot as shown in img

Answer 1

Just like with any other HTML template, you can add an img and absolutely position it.

Template:

<div class="dropdown-wrapper">
  <label class="control-label"
         for="data-to-choose-dropdown-id">
      Data To Choose
  </label>
  <p-dropdown [options]="_options"
              [attr.id]="'data-to-choose-dropdown-id'"
              [filter]="true"
              appendTo="body"
              [showClear]="true"
              placeholder="Choose"
              [style]="{'width':'100%'}"
              optionValue="id"
              optionLabel="name">
  </p-dropdown>
  <img class="extra-button" [src]="'assets/images/icons/magnifying-glass-brand.svg'" (click)="onExtraButtonClick()">
</div>

SCSS:

label {
  color: #6f8599;
}

.dropdown-wrapper {
  position: relative;

  ::ng-deep p-dropdown{
      .p-placeholder {
        opacity: 0.7;
      }
  }

  .extra-button {
    position: absolute;
  }
}