Ionic Picker Sample Code In Angular

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:

ion-picker selected value output like as below

Multiple Column Ionic Picker:

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:

An Overview On Ionic Action Sheet In Angular

Part-1 Ionic Angular JWT Authentication(Access Token Implementation)

Part-2 Ionic Angular JWT Authentication(Refresh Token Implementation)

Follow Me: