Adding a Wheel Picker to Your Ionic App

ionic-wheel-picker

The wheel picker is a super classic UI pattern and is used to display a fast selection of data inside your app. With Ionic, we can make use of a nice Cordova Plugin so the wheel picker will feel completely native on all platforms!

Initially I wanted to use this plugin which would even run without Cordova (so also on the web), but I kinda missed the native UI feeling for Android so I changed the topic to using the Ionic Native Wheel Selector.

Create Your App

We start with a blank Ionic app and add only the plugin we need and install the according Ionic Native package:

Now we have to hook up everything correctly like always, and we also already load the HttpClient so we can make a request later on. Go ahead and change your app/app.module.ts to:

That all we need to set up the wheel picker!

Displaying Simple Data

We will start with some dummy data, but before we create all the functions let’s start with the most amazing view you will ever see. Open your pages/home/home.html and change it to:

I think I’ve won the award for the most amazing UI now!

Anyhow, we needed 2 buttons to call our functions wich will either display a picker directly from some data we have or from remote data fetched from an API.

The wheel picker expects data with a key description by default. That’s why both arrays inside our dummyJson have that key, but you could also add in more information just make sure the description is there, which is also what you see once you open the picker.

To open a wheel picker we simply call the show() function on the plugin and pass in a configuration.

The items array is what will be displayed on the wheels, so the more arrays you pass in the more columns will be created (or wheels).

Besides that, you can configure the texts and then wait for the result, which is an array of information regarding each wheel and the selected index. We simply show that selected information with a Toast to see if everything went well.

Now go ahead and change your pages/home/home.ts to:

You can also find all possible configuration values and more examples on the Github page of the Wheel Selector.

Using Remote JSON Data

Not always you have some data you can immediately display, and also your JSON will not always contain a description key. Don’t worry, the plugin has a bit more to offer.

Inside our new function we make a small async request to grab some JSON from the Randomuser API which actually doesn’t contain the key we need.

The solution for this problem is to simply provide a dedicated displayKey to the configuration of the wheel picker which will then use exactly this key of our JSON data to fill the rows!

Go and add this function inside your controller as well now:

The only limitation I noticed here is that you can only add one displayKey, which means you can’t pick special values from different arrays. Perhaps you would need to somehow map your data before to make it fit the wheel picker style.

Conclusion

The Cordova wheel picker looks and works great, even with non standard JSON data.

Perhaps you give the other plugin a try as well, I’m sure it’s really helpful especially as it allows a deeper relationship between your selected data by allowing to specify different parents and their own custom children.

This is also an open issue on the plugin we used, perhaps we might see a change in that direction int the next time!

You can find a video version of this Quick Win below.