ionic picker

1<ion-button expand="block" onclick="openPicker()">Show Single Column Picker</ion-button>
2
3const defaultColumnOptions = [
4      [
5        'Dog',
6        'Cat',
7        'Bird',
8        'Lizard',
9        'Chinchilla'
10      ]
11    ]
12
13    const multiColumnOptions = [
14      [
15        'Minified',
16        'Responsive',
17        'Full Stack',
18        'Mobile First',
19        'Serverless'
20      ],
21      [
22        'Tomato',
23        'Avocado',
24        'Onion',
25        'Potato',
26        'Artichoke'
27      ]
28    ]
29
30    async function openPicker(numColumns = 1, numOptions = 5, columnOptions = defaultColumnOptions){
31      const picker = await pickerController.create({
32        columns: this.getColumns(numColumns, numOptions, columnOptions),
33        buttons: [
34          {
35            text: 'Cancel',
36            role: 'cancel'
37          },
38          {
39            text: 'Confirm',
40            handler: (value) => {
41              console.log(`Got Value ${value}`);
42            }
43          }
44        ]
45      });
46
47      await picker.present();
48    }
49
50    function getColumns(numColumns, numOptions, columnOptions) {
51      let columns = [];
52      for (let i = 0; i < numColumns; i++) {
53        columns.push({
54          name: `col-${i}`,
55          options: this.getColumnOptions(i, numOptions, columnOptions)
56        });
57      }
58
59      return columns;
60    }
61
62    function getColumnOptions(columnIndex, numOptions, columnOptions) {
63      let options = [];
64      for (let i = 0; i < numOptions; i++) {
65        options.push({
66          text: columnOptions[columnIndex][i % numOptions],
67          value: i
68        })
69      }
70
71      return options;
72    }