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>PickerController create method helps in create the picker overlay with the picker options
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.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
Support Me!
Buy Me A Coffee
PayPal Me
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:



how to retrieve only value?
ReplyDeleteThanks in advance
in single!
DeleteThanks !You don't know how much you help me.
ReplyDeleteI still need something that I haven't found. for example imagine we have 3 columns. I want to change the left column based on the value of the middle column. is that possible?
ReplyDeleteOkay I found the answer myself maybe it will become useful for others:
Deleteif you want to listen for a change :
picker.addEventListener("ionPickerColChange", async (event: any) => {
ADD SOME LOGIC HERE
});