WheelSelector Pluginβ

Improve this doc

This plugin is still in beta stage and may not work as expected. Please submit any issues to the plugin repo.

Native wheel selector for Cordova (Android/iOS).

Repo: https://github.com/jasonmamy/cordova-wheel-selector-plugin

Installation

1. Install the Cordova and Ionic Native plugins:
   

   $ ionic cordova plugin add cordova-wheel-selector-plugin
   $ npm install --save @ionic-native/wheel-selector@4
   

2. Add this plugin to your app's module

Supported platforms

• Android
• iOS

Usage

import { WheelSelector } from '@ionic-native/wheel-selector';


constructor(private selector: WheelSelector) { }

...

const jsonData = {
  numbers: [
   { description: "1" },
    { description: "2" },
    { description: "3" }
  ],
  fruits: [
    { description: "Apple" },
    { description: "Banana" },
    { description: "Tangerine" }
  ],
  firstNames: [
    { name: "Fred", id: '1' },
    { name: "Jane", id: '2' },
    { name: "Bob", id: '3' },
    { name: "Earl", id: '4' },
    { name: "Eunice", id: '5' }
  ],
  lastNames: [
    { name: "Johnson", id: '100' },
    { name: "Doe", id: '101' },
    { name: "Kinishiwa", id: '102' },
    { name: "Gordon", id: '103' },
    { name: "Smith", id: '104' }
  ]
};

...

// basic number selection, index is always returned in the result
 selectANumber() {
   this.selector.show({
     title: "How Many?",
     items: [
       this.jsonData.numbers
     ],
   }).then(
     result => {
       console.log(result[0].description + ' at index: ' + result[0].index);
     },
     err => console.log('Error: ', err)
     );
 }

 ...

 // basic selection, setting initial displayed default values: '3' 'Banana'
 selectFruit() {
   this.selector.show({
     title: "How Much?",
     items: [
       this.jsonData.numbers, this.jsonData.fruits
     ],
     positiveButtonText: "Ok",
     negativeButtonText: "Nope",
     defaultItems: [
       {index:0, value: this.jsonData.numbers[2].description},
       {index: 1, value: this.jsonData.fruits[3].description}
     ]
   }).then(
     result => {
       console.log(result[0].description + ' ' + result[1].description);
     },
     err => console.log('Error: ' + JSON.stringify(err))
     );
 }

 ...

 // more complex as overrides which key to display
 // then retrieve properties from original data
 selectNamesUsingDisplayKey() {
   this.selector.show({
     title: "Who?",
     items: [
       this.jsonData.firstNames, this.jsonData.lastNames
     ],
     displayKey: 'name',
     defaultItems: [
       {index:0, value: this.jsonData.firstNames[2].name},
       {index: 0, value: this.jsonData.lastNames[3].name}
     ]
   }).then(
     result => {
       console.log(result[0].name + ' (id= ' + this.jsonData.firstNames[result[0].index].id + '), ' +
         result[1].name + ' (id=' + this.jsonData.lastNames[result[1].index].id + ')');
     },
     err => console.log('Error: ' + JSON.stringify(err))
     );
 }

Instance Members

show(options)

Shows the wheel selector

hideSelector()

Platforms:iOS 

Hide the selector

WheelSelectorOptions