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 home.page.ts 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.
Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Nitin Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Nitin
Guest
Nitin

There is an issue with this plugin on iOS 13 devices. The wheel selector popup is blank if Dark theme is enabled on iPad.