ionic 2 ion-select - close select box programmatically

Question

I'm working on ionic2 project. I use ion-select element.

I search after a way to close the select-box programmatically on select any item (not wait the user to press OK).

  <ion-select id="select" #select>
      <ion-option (ionSelect)="closeAndSave()" *ngFor="let option of enumList" [value]="option">{{ option}}</ion-option>
    </ion-select>

`

class myClass{
    @viewChild('select') select:Select;
    closeAndSave(){
        /*it is come here on press any option. but how can I close here my select element? I tried: this.select.destroy()  - not do any thing. any solution?*/
    }

`

Answer 1

this is what I did:

this.court = val;
this.select.close();

put this inside your closeAndSave function.

Before that u need to pass some value from your closeAndSave function like:

(ionSelect)="closeAndSave('someValueHere')"

then use this value there in you TS code:

import { Select } from 'ionic-angular';

class myClass{
    @ViewChild(select) select:Select;
    closeAndSave(val){
    this.someVar = val;
        this.select.close();
    }
}

Answer 2

try to test this tag:

you only need to add interface="action-sheet" in the ion-select element.

  <ion-item>
    <ion-label>Gender</ion-label>
    <ion-select interface="action-sheet">
      <ion-option value="f" selected="true">Female</ion-option>
      <ion-option value="m">Male</ion-option>
    </ion-select>
  </ion-item>

I'm not sure if that's a valid option (in terms of UX) in your app.

source : https://stackoverflow.com/a/39015858/308578

Answer 3

I used this: (document.querySelector('ion-backdrop') as HTMLElement).click();

Answer 4

I'm not sure if this works, but it is shown as a popup and popups can be dismissed with the ionic ViewController.

You can use it like this:

import { ViewController } from 'ionic-angular'
...
export class YourComponent {
    constructor(private viewCtrl: ViewController){}
    closeAndSave(){
        //save things here 
        this.viewCtrl.dismiss();
    }
}