Closing ion-select programmatically

Ionic Framework ionic-v3
1

Hi,

I can’t seem to get the ion-select box to close via the close() function.

I did the following:

import { Select } from 'ionic-angular';
export class AddAccountPage {
	@ViewChild('myselect') select: Select;
...
  closeSelect(){
  	this.select.close();
  }
  openSelect(){
  	this.select.open();
  }
}

I know I selected the right one because this.select.open() works.
Did I miss something?

Any help would be appreciated.

2

Try using console.log to make sure that you are talking to the right button. I don’t see any mistakes in your code. Did you tried to put the “this.select.close();” away from your function. Since you usually don’t need to code the open and close function unless you want to add extra code to it.

closeSelect(){
console.log('close select works");
}

3

Kind of figured it out. Its a bit odd, not sure if it was a bug or anything.

Yes, turns out my ion-button was not calling the openSelect function. If I put ion-button right above ion-select, upon clicking on the button, it will open the ion-select.

So I mistaken thought it had successfully called the openSelect(). Turns out, even if I take away the (click)=‘openSelect()’, it will still open the ion-select. In other words, it did not call the function yet still able to open the ion-select. Somehow by placing the button above ion-select, it automatically open the ion-select regardless, bypassing any function attached to it. So even if I attach the closeSelect(), it didnt invoke the function.

If i put the ion-button after ion-select, then everything works accordingly. Its a bit odd, not sure what to make of it.

<button ion-button (click)='openSelect()'>Open</button>
  <ion-select #myselect>
    <ion-option value="f" selected>Female</ion-option>
    <ion-option value="m">Male</ion-option> 
  </ion-select>
4

What exactly do you want to create ? Is your question answerd or do you still need support ? :penguin:

5

Oh sorry, yes it been resolved. Thank you very much :smile:

6

you can use interface=“popover” as following
<ion-select [(ngModel)]=“role” multiple=“false” interface=“popover”>