Check out Ionic Enterprise

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
    
  2. Add this plugin to your app's module

Supported platforms

Usage

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


constructor(private selector: WheelSelector) { }

...

let 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: [
       this.jsonData.numbers[2], // '3'
       this.jsonData.fruits[3] // 'Banana'
     ]
   }).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: [
       this.jsonData.firstNames[2],
       this.jsonData.lastNames[3]
     ]
   }).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

Param Type Details
options WheelSelectorOptions

Options for the wheel selector

Returns: Promise<WheelSelectorData> Returns a promise that resolves with the selected items, or an error.

hideSelector()

Platforms:iOS 

Hide the selector

Returns: Promise<void>

WheelSelectorOptions

Param Type Details
title string

The title of the selector's input box

items Array<Array<WheelSelectorItem>>

The items to display (array of items).

defaultItems Array<WheelSelectorItem>

Which items to display by default, example ["2","Apple"] (if items.length is 2 for instance)

(optional)
positiveButtonText string

The 'ok' button text Default: Done

(optional)
negativeButtonText string

The 'cancel' button text Default: Cancel

(optional)
theme string

Android only - theme color, 'light' or 'dark'. Default: light

(optional)
wrapWheelText boolean

Whether to have the wheels 'wrap' (Android only) Default: false

(optional)
displayKey string

The json key to display, by default it is description, this allows for setting any key/value to be displayed Default: description

(optional)

API

Native

General