Ionic 2 checkbox select is not showing the input options

Ionic Framework ionic-v3
1

So I am trying to implement a checkbox select in ionic 2, but it doesn’t show the input options. What am I doing wrong?

My meeting-room.html has

<ion-select [selectOptions]="roomOptions" [multiple]="true">

and my meeting-room.ts has

availableTimeSlots = [
    {
      type: 'checkbox',
      name: 'check1',
      value: '8.30 AM - 9.00 AM',
      label: '8.30 AM - 9.00 AM'
    },
    {
      type: 'checkbox',
      name: 'check1',
      value: '9.00 AM - 9.30 AM',
      label: '9.00 AM - 9.30 AM'
    }
  ];

  constructor(public navCtrl: NavController) {}

  ionViewDidLoad() {
    console.log('Hello Meetingroom Page');
  }

  roomOptions = {
    title: 'Time Slots',
    subTitle: 'Select your time slots',
    inputs: this.availableTimeSlots,
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
        handler: data => {
          console.log('Cancel clicked');
        }
      },
      {
        text: 'Select',
        handler: data => {
          console.log('Select clicked');
        }
      }
    ]
  };

The output is like this,

image
CalConnectV2 Ionic App.png371×647 130 KB

2

Don’t you add the options the same way you’d do with a regular html select? e.g.

<ion-select>
   <ion-option value='something'>

Are you sure selectOptions is not a configuration thingy?

3

Yeah just check the docs if you’re unsure.

4

selectOptions uses AlertController API. So as per document it should use the inputs options right?

5

Could you point me to the document you’re talking about? I believe you’re using ion-select, not alertController so those options are probably totally irrelevant.

6

If you mean this part:

Select Options
Since ion-select uses the Alert and Action Sheet interfaces, options can be passed to these components through the selectOptions property. This can be used to pass a custom title, subtitle, css class, and more. See the AlertController API docs and ActionSheetController API docs for the properties that each interface accepts.

It says nothing about select options, just the way to set title and stuff. So no, use ion-option like you would with a regular html select

7

Yuh, I meant that and thank you for the clarification.

This part in the docs confused me… It lead me to think that I could use all the options in AlertController with ion-select