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?*/
    }

`

please give solution , how you solved it – kumar kundan Jun 22 '17 at 07:05 — kumar kundan, Jun 22 '17 at 07:05

score 7 · Answer 1 · edited Jul 10 '18 at 20:31

7

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();
    }
}

edited Jul 10 '18 at 20:31

ascripter

5,665
12
45
68

answered Aug 02 '17 at 13:48

yash_DedSec

251
2
11

i edit this question and : import { Events } from 'ionic-angular'; – saber tabatabaee yazdi Jul 11 '18 at 10:04
you can use this template its a good sample https://stackoverflow.com/a/48656554/308578 – saber tabatabaee yazdi Jul 11 '18 at 11:49

score 1 · Answer 2 · answered Jul 12 '18 at 21:09

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

By far the most accurate answer. – Vova Nov 15 '19 at 11:01 — Vova, Nov 15 '19 at 11:01

score 1 · Answer 3 · answered Mar 02 '20 at 12:46

1

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

answered Mar 02 '20 at 12:46

Алексей Медведев

131
1
3

score -1 · Answer 4 · answered Dec 20 '16 at 10:51

-1

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();
    }
}

answered Dec 20 '16 at 10:51

KaFu

2,284
1
11
12

1

Thank you but not work... it dismiss the last page that push to the stack. – user5260143 Dec 21 '16 at 09:14

ionic 2 ion-select - close select box programmatically

4 Answers4

Linked