Create a Custom Input for Ion-Select

Build something unique that fits your app

Custom ion-select input

This article covers a way to implement a custom input field for the ‘ion-select’ component in the Ionic 4/Angular 8 application, which by default does not allow editing of the options in it.

<ion-item>
  <ion-label>Hair Color</ion-label>
  <ion-select>
    <ion-select-option selected>Custom</ion-select-option>
    <ion-select-option>Brown</ion-select-option>
    <ion-select-option>Dark</ion-select-option>
  </ion-select>
</ion-item>

The ion-select component above allows selecting one option out of three available in the Ionic 4 application. There is a use case where we want a user to be able to actually type in the option that they want. We are going to achieve that smooth UX journey by supplementing the ion-select flow with AlertController.

Let’s first cover some things that will help us structure our approach and define our scope:

1. First, allowing users to add their custom values means we should support n-amount of <ion-select-options> in our template, so we have to use *ngFor directive and store the current set of values in our class (ts file).
2. We should ensure that all the changes a user is making are picked up by Angular and are duly rendered in the template (we will see what that…