Tag Archives: Select

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.