CODEWITHSUNDEEP
angularionic-frameworkionic4angular8
michellesokolov
michellesokolov

Reputation: 45

Add ionic 4 icon to ng select dropdown menu

I have an ngx select dropdown and would like the place holder text to include a magnifying icon from ionic 4 framework. Is this possible? Currently, the icon is on the same line but outside of the drop down. I am using angular 8.

<form [formGroup]="staffForm">
  <div>
    <span>
      <ion-icon name="search"></ion-icon>
      <ngx-select (selectionChanges)="selectionChanged($event)" (select)="goToStaff(selected)" [items]="sortedStaff"
        formControlName="staffId" optionValueField="id" optionTextField="customText"
        placeholder="Search Staff Members Here">
      </ngx-select>
    </span>
  </div>
</form>

Upvotes: 1

Views: 1803

Answers (1)

Vivek Jain
Vivek Jain

Reputation: 2864

I think this is not possible directly. You can use css to achieve this.

Try below css.

:host ::ng-deep .ngx-select__placeholder span::before {
  content: url(https://api.iconify.design/entypo-magnifying-glass.svg?height=15) !important;
  padding: 5px;
}

:host ::ng-deep input.ngx-select__search {
  background-image: url("https://api.iconify.design/entypo-magnifying-glass.svg?height=15");
  background-repeat: no-repeat;
}

:host ::ng-deep input.ngx-select__search:not(:placeholder-shown) {
  background-image: none;
}

HTML

<div>
  <span>
     <ngx-select [items]="['Item 1', 'Item 2']" [(ngModel)]="itemId" placeholder="    Select"></ngx-select>
    </span>
</div>

You can check below stackblitz for more detail.

https://stackblitz.com/edit/ionic-6t8xfs

Upvotes: 1

Related Questions