Ionic 4/3 | Native Like Select Box Wheel Selector in Ionic Application

In this post, we will discuss a very beautiful and native-like wheel select component. These type of select boxes looks very cool and generally found in native applications.

To implement these we will add Cordova and Ionic native plugin then we need to define wheel selector options in a JSON object.

Let’s implement in Ionic 4 Application.

Create a new Ionic 4 blank application

Make sure you have installed the latest version of Ionic CLI and NPM

Create a new Ionic app

Install Cordova and Ionic Native Plugins

this plugin is supported for Android and IOS

Include in App’s main module file app.module.ts

Add JSON and event to show Wheel Select in Home Component.

Replace the following code in app’s file

Here we are calling show method with items parameter set with values to show for Selection. When positiveButtonText is pressed then block is executed to return values selected.
We can also set the theme attribute with values “dark” or “light“.
See more option on Cordova plugin documentation here.

Leave a Reply

Your email address will not be published. Required fields are marked *