Hey, folks! How are you all? Hope you all are doing well.Today, we will be learning about Multipicker in Ionic 2. Multipicker has same functionality as select, both are for selecting values from a dropdown. The only difference is the way they show up the options for a dropdown. See below:

                             

 

So, let’s start.

First of all, let us see what all can we do with a multi-picker:

1.Creating a simple multi-picker by manually adding data.

2. Creating a multipicker by adding data from Json.

3. Store data manually into multipicker from Json to be used as a default label.

4. Store data manually into multipicker to be used as default label.

So, Let’s get started by installing a multipicker into our project:

1. Create a tabs project (You can  take any kind of project according to your choice).

2. Install multipicker inside your project folder. Type following line:

npm install ion-multi-picker --save

3. Now, go to App.module.ts file and import multipicker in it as follows:

import { MultiPickerModule } from 'ion-multi-picker';

@NgModule({

  declarations: [

    MyApp,

    HomePage,

    TabsPage,

  ],

  imports: [

    IonicModule.forRoot(MyApp),

    MultiPickerModule //Import MultiPickerModule

  ],

  bootstrap: [IonicApp],

  entryComponents: [

    MyApp,

    HomePage,

    TabsPage,

  ],

  providers: []

})

export class AppModule {}

Once you have finished with installation part, you can start creating a multi-picker.

Let’s start by creating a Simple multi-picker:

I. Create a simple multipicker by manually adding the data:

        1. Add multipicker in your html file:

<ion-multi-picker  item-content [multiPickerColumns]="simpleColumns"></ion-multi-picker>

Here:
[multiPickerColumns]=”simpleColumns”: SimpleColumns is name of the  array of data that a multipicker is populated of. You can put any name of the array.

2. Add it in your ts file:

 Export class 

{

 public simpleColumns: any[];

   constructor( private navCtrl: NavController)

   {

     this.simpleColumns = [

                           {

                              name: 'col1',

                              options: [

                                        {text: '1', value: '1'},

                                        {text: '2', value: '2'},

                                        {text: '3', value: '3'},

                                        {text: '4', value: '4'},

                                        {text: '5', value: '5'},

                                        {text: '6', value: '6'},

                                        {text: '7', value: '7'},

                                        {text: '8', value: '8'},

                                        {text: '9', value: '9'},

                                        {text: '10', value: '10'}

                               ]

                            }

                       ];

                }

II. Create a multipicker by adding data from Json:

<ion-multi-picker  text-left item-content  [(ngModel)]="orderItem.modAnswer[item.ModifierGroup.flavorize.groupId].id" [multiPickerColumns]="flavorizingOptions"></ion-multi-picker>

Here,

  If you compare this multipicker with the multipicker in step 1 you will notice that only ngModel is added.
So you only have to convert it into column by using “convertToSingleColumn” function. For this, you have to import  helper

import {Helper} from '../../../../core/helper';

And OnInit from ‘@angular/core’;

 import{OnInit} from '@angular/core’;

For this:
    Implement OnInit  with export class:

export class QuickAddComponent implements OnInit

Here: QuickAddComponent is your class name.

  Export class QuickAddComponent implements OnInit{
 public flavorizingOptions: any[];                                                       
   constructor() {...}
   ngOnInit(): void {
    this.flavorizingOptions = Helper.convertToSingleColumn(this.item.ModifierGroup.flavorize.options, 'name', 'value');

Here:
flavorizingOptions is the name of the array.
convertToSingleColumn: a function to convert into columns.
this.item.ModifierGroup.flavorize.options, ‘name’, ‘value’ : The bold text is the json part where I have the values to be shown in the multipicker. You can have any.

III. Store data manually into multipicker from Json to be used as default label:
The basic concept of this step is to have a default value every time the page is loaded. We can have two kinds of values here:</span
a) The first option in the multipicker.
b) A dummy text such as select.(Will see in 4th step).

   Let us see now how we can add the first option in the multipicker as a default value. 

  • Add this line in ngOinit()
this.orderItem.modAnswer[this.item.ModifierGroup.flavorize.groupId].id= this.item.ModifierGroup.flavorize.options[0].value;

Here:
this.orderItem.modAnswer[this.item.ModifierGroup.flavorize.groupId].id: Is a ngModel value.
this.item.ModifierGroup.flavorize.options[0].value → Here, you have multipicker values.

IV. Store data manually into multipicker  to be used  as default label:

    Main Concept here is to have a random text such as Select to use it as a default value in multipicker. For this,

  • First store the default value in a form of array in  a variable:
var rec ={groupId:"",name:"Select...",value:"0"};
  • Then add it into the flavourizingOptions array on index 0. For this use function “unshift” as below:
 this.item.ModifierGroup.flavorize.options.unshift(rec);
  • Then set the value as default value:
  this.orderItem.modAnswer[this.item.ModifierGroup.flavorize.groupId].id= this.item.ModifierGroup.flavorize.options[0].value;

This is all with multipicker. Hope you have followed the steps completely. If you have any queries, please comment on this article. If you want to learn alerts in detail then stay tuned. I will be back very soon.

A Guide to add a Multipicker in Ionic 2

Most Popular

Have a Great startup Idea and want to make it possible? Looking for an extraordinary team to build a mobile or Web app for your idea to come into reality? Then you are at right place. I provide my services for mobile and web app development.

Copyright © 2019 CrocoCode. All rights reserved.

To Top