Category Archives: Ionic 2

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.

Ionic Generator Function

I had no idea there was a generator function in Ionic 2 until this week.  It’s a pretty handy command line function that generates page and service stubs inside your app automatically.

Rather than manually creating js, html and scss files  in your editor (I use Atom by the way), you can quicken the process up a little by using the generate command like this:

ionic g page contactsPage

This will automatically create the following pages for you:

app/pages/contacts-page/contacts-page.html

app/pages/contacts-page/contacts-page.js

app/pages/contacts-page/contacts-page.scss

If you type:

ionic g –list

you will see the list of available options which currently includes components, providers and a few others.  I expect the list will grow as the framework evolves.

 


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.