Ionic 2 Select

admin

8 years ago

Ionic 2 Select ion-select component is used to create the select element similar to the HTML <select> element. Ionic 2 provides various types of select boxes which can be used easily. It is very simple to create different types of select box in Ionic 2. Here in this tutorial we are going to explain how you can create select box with options, You can also use our online editor to run and see the output of the example.

Ionic 2 Select Dropdown | Multiselect Checkbox Example

Let us first create very basic select box-

Ionic 2 Select Example:

<ion-list>
  <ion-item>
    <ion-label>Select Box</ion-label>
    <ion-select [(ngModel)]="demoSelectBox">
      <ion-option value="1">Option 1</ion-option>
      <ion-option value="2">Option 2</ion-option>
      <ion-option value="3">Option 3</ion-option>
      <ion-option value="4">Option 4</ion-option>
      <ion-option value="5">Option 5</ion-option>
      <ion-option value="6">Option 6</ion-option>
    </ion-select>
  </ion-item>
<ion-item>
 You Selected = {{demoSelectBox}}
</ion-item>
</ion-list>

Try it »

By Default ion-select uses the AlertController API to open the options in overlay, You can change it to use the ActionSheetController API By passing the action-sheet to the interface property.

If you run the above example it will produce the output something like this –

Multiselect Dropdown

You can also create multiple select dropdown by adding the attribute multiple=”true”. Here is an example of multiple select dropdown example-

Multiple Select Dropdown Example:

<ion-list>
  <ion-item>
    <ion-label>Select Box</ion-label>
    <ion-select [(ngModel)]="demoSelectBox" multiple="true">
      <ion-option value="1">Option 1</ion-option>
      <ion-option value="2">Option 2</ion-option>
      <ion-option value="3">Option 3</ion-option>
      <ion-option value="4">Option 4</ion-option>
      <ion-option value="5">Option 5</ion-option>
      <ion-option value="6">Option 6</ion-option>
    </ion-select>
  </ion-item>
<ion-item>
 You Selected = {{demoSelectBox}}
</ion-item>
</ion-list>

Try it »

If you run the above example it will produce the output something like this –