



Introduction:

Ionic Picker(ion-picker) is a popup slides up from the bottom of the device screen, which contains rows with selectable column separated items.





The main building block of ion-picker as follows:

PickerController

PickerOptions

PickerController:

PickerController object helps in creating an ion-picker overlay.

create(opts?: Opts): Promise<Overlay>

PickerOptions:

PickerOptions is a configuration object used by PickerController to display ion-picker.

Single Column Ionic Picker:

single.item.picker.ts:

import { Component } from "@angular/core"; import { PickerController } from "@ionic/angular"; import { PickerOptions } from "@ionic/core"; @Component({ selector: "single-column-picker", templateUrl:"single.item.picker.html" }) export class SingleItemPicker { animals: string[] = ["Tiger", "Lion", "Elephant", "Fox", "Wolf"]; constructor(private pickerController: PickerController) {} async showPicker() { let options: PickerOptions = { buttons: [ { text: "Cancel", role: 'cancel' }, { text:'Ok', handler:(value:any) => { console.log(value); } } ], columns:[{ name:'Animals', options:this.getColumnOptions() }] }; let picker = await this.pickerController.create(options); picker.present() } getColumnOptions(){ let options = []; this.animals.forEach(x => { options.push({text:x,value:x}); }); return options; } }

PickerController from "@ionic/angular" needs to be injected into the component constructor.

PickerOptions is an interface from "@ionic/core", which is a configuration object for ion-picker.

PickerOptions interface consists of a property "buttons" which of type array. This button array used to configure to display the button on the picker overlay. Most probably configured with 2 types of buttons one for cancel the overlay and others for getting the selected value in the overlay columns

In "buttons" array, to configure button to cancel the overlay is a simple configuration by assigning the role property to 'cancel'.

In "buttons" array, the object is provided with a property called "handler". This handler will receive the selected data from the overlay on clicking the button.

PickerOptions interface consists of a property "columns". This "columns" property is also an array of objects. Each object in the array represents each column on the picker overlay.

The "columns" array of the object of type "PickerColumn":

export interface PickerColumn { name: string; align?: string; selectedIndex?: number; prevSelected?: number; prefix?: string; suffix?: string; options: PickerColumnOption[]; cssClass?: string | string[]; columnWidth?: string; prefixWidth?: string; suffixWidth?: string; optionsWidth?: string; refresh?: () => void; }

In the "PickerColumn" type mandatory fields are "name" and "options". The "name" property string represents the object name. The "options" is an array of the object of type "PickerColumnOption"

export interface PickerColumnOption { text?: string; value?: any; disabled?: boolean; duration?: number; transform?: string; selected?: boolean; }

In the "PickerColumnOption" interface "text" property is to display our values on picker overlay.

single.item.picker.html:

<ion-content> <ion-button size="large" (click)="showPicker()"> Single Column Ionic Picker </ion-button> </ion-content>

Single Column ion-picker Output:



Multiple Column Ionic Picker: ion-picker selected value output like as below

multiple.item.picker.ts:

import { Component } from "@angular/core"; import { PickerController } from "@ionic/angular"; import { PickerOptions } from "@ionic/core"; @Component({ selector: "multiple-column-picker", templateUrl:"multiple.item.picker.html" }) export class MultipleItemPicker { gadgets: any[] = [ [ "Samsung Note 10", "OnePlus 7T", "Redmi Note8", "Oppo Reno3 Pro", "VIVO V11 Pro" ], [ "ASUS ZenBook Pro", "Lenovo IdeaPad", "Acer Nitro", "Dell G3", "MSI Gamming GF75 Thin" ] ]; numColumns:number = 2; // number of columns to display on picker over lay numOptions:number =5 // number of items (or rows) to display on picker over lay constructor(private pickerController: PickerController) {} async showPicker() { let options: PickerOptions = { buttons: [ { text: "Cancel", role: 'cancel' }, { text:'Ok', handler:(value:any) =< { console.log(value); } } ], columns:this.getColumns() }; let picker = await this.pickerController.create(options); picker.present() } getColumns(){ let columns=[]; for(let i =0 ;i < this.numColumns;i++){ columns.push({ name:`col -${i}`, options: this.getColumnOptions(i) }) } return columns; } getColumnOptions(columIndex:number){ let options = []; for(let i=0;i < this.numOptions;i++){ options.push({ text: this.gadgets[columIndex][i % this.numOptions], value:i }) } return options; } }

getColumnOptions loops the data to display on the picker overlay

getColumns loops the number of columns to display on the picker overlay

multiple.item.picker.html:

>ion-content< >ion-button size="large" (click)="showPicker()"< Multiple Column Ionic Picker >/ion-button< >/ion-content<

Multiple Column Ionic Picker Output:

ionic-picker multiple columns selected value like as below

Wrapping Up:

Hopefully, this article helps to implement ion-picker in angular. I love to have your feedback, suggestions, and better techniques in the comment section.

Refer:

Follow Me:

PickerController create method helps in create the picker overlay with the picker options