How do I open Select programmatically

Ionic Framework ionic-v3
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>
4 Likes
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()
  }
}
9 Likes
3

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

1 Like
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);  }
}
7 Likes
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>
1 Like
11

import { Select } from ‘ionic-angular’; - This import is not detected in ionic 4.

Also, I have tried replacing ‘ionic-angular’ with ‘@ionic/angular’ with no luck.

12

in ionic four it is ion-select
you should import the following:
import { IonSelect } from ‘@ionic/angular’;

2 Likes
13

The timeout here is key from @ mindstormtech’s solution.

14

I think that timeouts like that should be avoided if at all possible (they behave unpredictably), and in this case it should be easy to do so. Don’t try to reference @ViewChild properties in the constructor; use ngAfterViewInit instead.

15

Normally I would agree with you , but in this case the select that I need to open doesn’t appear immediately until another control is clicked on.

16

Thanks ramon, this helped me, there were one thing missing for me though, i navigated to another site when the ionChanged event was called, but if a user clicked the same option multiple times, nothing would happen except for the first time. It was not reset.

Adding select.value = undefined before the click event was enough, and made it function perfect for my use case, maybe someone else have the same need.

    const element: any = this.element.nativeElement;
    const select = element.querySelector('#select' + index);
    select.value = undefined;
    select.click();

<ion-button color="dark" (click)="openPopover(i)" class="edit-item">
   <fa-icon [icon]="['fal', 'ellipsis-h']" size="2x"></fa-icon>
    <ion-select #typeSelect interface="popover" [id]="'select'+i" (ionChange)="navigateTo($event, item)" placeholder="Select One">
       <ion-select-option value="edit">edit</ion-select-option>
       <ion-select-option value="translate">translate</ion-select-option>
       <ion-select-option value="remix">mix</ion-select-option>
       <ion-select-option value="delete">delete</ion-select-option>
    </ion-select>
</ion-button>