How do I open Select programmatically


#1

How can I open the ‘Select’ component from my TypeScript code, and then fill that component with JSON from this.data. I’ve had a look at the documentation and seen the open() instance member, but I don’t know how to call it.

I’ve tried this: let multipleStudentSelect = this.select.open(); but how do I link this to the ion-select in my code.

 <ion-select [(ngModel)]="multipleStudents">
        <ion-option *ngFor="x of data.Students" [value]="x.Ref">{{x.Name}}</ion-option>
  </ion-select>

#2

Had the same issue, i want to open the ion-select dynamically if the current logged in user has more than one site that he can access, as you pointed out doc isnt that explanatory on open() but here is how you do it.

In your component aside from the template do it like this:

import { Select } from 'ionic-angular';

@Component({
  templateUrl: '<your template here>'
})
export class SelectOpeningClass {
  @ViewChild(Select) select: Select;

  constructor() { do something }
  ionViewWillEnter() { //or whatever method you want to use
    this.select.open()
  }
}

#3

What if i have more than one select than we should follow this-> @ViewChild(<id_of_select>) select: Select; or else ?


#4

Its worked thanks :slight_smile:


#5

Hello, are you able to do if more than one select ???


#6

Not works if we have more than one select if any solutions please explain


#7

If you have multiple selects, you can identify them by the following:

<ion-select #select1 [(ngModel)]="...">
        <ion-option ...
</ion-select>
<ion-select #select2 [(ngModel)]="...">
        <ion-option ...
</ion-select>
---------------------------------------------------------------------------
import { Select } from 'ionic-angular';

@Component({
  templateUrl: '<your template here>'
})
export class SelectOpeningClass {
  @ViewChild('select1') select1: Select;
  @ViewChild('select2') select2: Select;

  constructor() { do something }
  ionViewWillEnter() { //or whatever method you want to use
    setTimeout(() => {
       this.select1.open();
    },150);  }
}

#8

I know this is an old topic but I want to share my solution to the comunity:

Imagine this template:

<ion-item *ngFor="let select of selectsArray; let i = index;">
    <ion-select [id]="'select'+i">
        <ion-options *ngFor="let options of select.options;" [value]="option.value">{{option.name}}</ion-options>
    </ion-select>
    <button ion-button small clear icon-only (click)="openSelect(i)" item-end>
        <ion-icon name="options"></ion-icon>
    </button>
</ion-item>

We have a openSelect(i) method that will open a select dinamically (this is the initial topic’s question).

...
@ViewChild(Content) content: Content;

constructor(){}

openSelect(index: number) {
    let element: ElementRef = this.content.getNativeElement();
    let select = element.querySelector('#select'+index);
    select.click(); 
}

I think this is the correct answer if you have multiple and dinamic selects.

@arjunnaha, mark this as a solution reply if you think so.


#9

Probably a better fit to use QueryList With Ionic.

import { QueryList, ViewChildren } from ‘@angular/core’;
import { Select } from ‘ionic-angular’;
@ViewChildren(Select) selectGroup: QueryList<Select>;

To avoid inappropriate intimacy with the DOM


#10

after 1 day googling finally i can find a trick that worked: action-sheet https://stackoverflow.com/a/39015858/308578

<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>