Select component in Ionic 2

I really like the new select component now built into Ionic 2.  This creates a really nice alert style selection prompt which looks pretty similar in iOS and Android and is incredibly easy to use.

In your HTML just use the <ion-select> tag like this:

<ion-select [(ngModel)]=”data.room”>
<ion-option checked=”true” value = “Ash”>Ash</ion-option>
<ion-option value = “Bay”>Bay</ion-option>
<ion-option value = “Beech”>Beech</ion-option>
<ion-option value = “Cedar”>Cedar</ion-option>
<ion-option value = “Redwood”>Redwood</ion-option>
</ion-select>

This creates a selection dialog with 5 options that are bound to the data.room model inside the component.  When the user clicks the select field on screen they see this:

room

The select component can easily be configured for multi-value entries as well as single values.  For more information, see the Ionic 2 documentation here.  I’m looking forward to an up and coming release of the Ionic Framework when date inputs will get the same treatment (i.e they will have a dialog just like the select component).  According to the roadmap this is currently scheduled for beta.5.

 


I’m a mobile applications developer based in the UK, concentrating primarily on hybrid application development with Ionic and Ionic 2 but also with native development skills. Please visit www.crossplatformsolutions.co.uk for more information about me and how I may be able to help you with mobile application development, particularly with Ionic 2 but also with other mobile frameworks and technologies.  Thanks for visiting.

3 thoughts on “Select component in Ionic 2

  1. AK

    Hi , I am trying to use ionic 2 ion-select component as well . The ‘ok’ and ‘cancel’ button in the alert have same css classes. I need to style both the buttons differently. Do you know any way to override inidividual styles for ‘OK’ and ‘cancel’ button ?

    Reply
  2. nithya

    hi, sir/mam
    I am trying to use ionic 2 ion-select component as well.
    How to write angular function plz, give me some guidens.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s