How to pop out ion-select using different button

Question

How do I pop out the ion-select using different button?

<ion-select [(ngModel)]="choices" multiple="true">
        <ion-option>Appliances</ion-option>
        <ion-option>Automobile</ion-option>
        <ion-option>Cellphones</ion-option>
        <ion-option>Clothing</ion-option>
        <ion-option>Computers</ion-option>
        <ion-option>Electronics</ion-option>
        <ion-option>Toys</ion-option>
</ion-select>

score 24 · Accepted Answer · answered Feb 07 '18 at 05:25

24

You can ViewChild with ionic-angular

html

<ion-select [(ngModel)]="choices" multiple="true" #mySelect>
     <ion-option>Appliances</ion-option>
     <ion-option>Automobile</ion-option>
     <ion-option>Cellphones</ion-option>
     <ion-option>Clothing</ion-option>
     <ion-option>Computers</ion-option>
     <ion-option>Electronics</ion-option>
     <ion-option>Toys</ion-option>
</ion-select>

<button ion-button (click)="openSelect()">Open</button>
<button ion-button (click)="closeSelect()">Close</button>

ts

import { Component, ViewChild } from '@angular/core';
import { NavController,Content, Select } from 'ionic-angular';
import { Events } from 'ionic-angular';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage 
{    
    @ViewChild('mySelect') selectRef: Select;
    constructor(public navCtrl: NavController,public events: Events) 
    {}

    openSelect()
    {
        this.selectRef.open();
    }

    closeSelect()
    {
        this.selectRef.close();
    }
}

answered Feb 07 '18 at 05:25

Paresh Gami

4,777
5
23
41

1

The clearest and simplest example i have found so far. It made my code working. Thanks – Qin Wang Apr 27 '18 at 13:25
1

Glad to help you.! – Paresh Gami Apr 27 '18 at 13:35
thanks but when we have more that one select element in a page for others did not work what is your opinion? – saber tabatabaee yazdi Jul 11 '18 at 11:53
@PareshGami yes exactly but my second element seems load data after init.? what about it? can you help me or send an article or StackOverflow link? (ionSelect) for that not worked! how can I add event listener programmatically after data initiated? in this example https://stackoverflow.com/q/41237061/308578 – saber tabatabaee yazdi Jul 11 '18 at 13:53
@Paresh Gami will you please tell me same solution for ionic4? – Bhagyashri Dec 12 '19 at 08:39
@userI yes I am able to do it for ionic 4. – Paresh Gami Dec 12 '19 at 10:35
@userI You can check my medium blog here https://medium.com/@gamiparesh5/how-to-pop-out-ion-select-using-different-button-in-ionic-4-3e036f3f7ea3?sk=ffdb9166bd421bcf61ee0f56d2e7d35f – Paresh Gami Dec 12 '19 at 11:39
@Paresh Gami Im not able to close ion-select on button click because its not having method close – Bhagyashri Dec 12 '19 at 12:22
@userI If ion-select is open how you click close button? Because ion-select cover full area of device screen. – Paresh Gami Dec 12 '19 at 14:06
@Paresh Gami Im clicking mobile's hardware back button – Bhagyashri Dec 13 '19 at 06:35
@userI If we press the back button of hardware that ion-select close by itself – Paresh Gami Dec 13 '19 at 17:51
@Paresh Gami No its not closing ion-close itself .The ion-select remain as it is when press back button – Bhagyashri Dec 16 '19 at 06:59

score 7 · Answer 2 · answered May 05 '19 at 15:21

Thanks to @PareshGami

But in ionic 4, if you want to display the list only if a button is clicked and hide select

1.Import IonSelect

import { Component, ViewChild } from '@angular/core';
import { Platform, Events, IonSelect } from '@ionic/angular';

2.Inside class, add reference to select and set showList to true to hide select. Also add setCountry() to retrieve selected country.

@ViewChild('countryList') selectRef: IonSelect;
showList = true;

setCountry() {
    console.log('New country');
}

3.In HTML, add select element with hidden property

<ion-select placeholder="Country" #countryList [hidden]='showList' (ionChange)='setCountry()'>
    <ion-select-option value="1">Egypt</ion-select-option>
    <ion-select-option value="2">Kuwait</ion-select-option>
    <ion-select-option value="3">UAE</ion-select-option>
    <ion-select-option value="4">Qatar</ion-select-option>
    <ion-select-option value="5">Bahrain</ion-select-option>
    <ion-select-option value="6">Saudi Arabia</ion-select-option>
</ion-select>

<ion-label (click)='displayCountry()'>Change</ion-label>

So select element is invisible and clicking Change will display the country list to select.

Have you any idea how to set interface in above your code.? I mean set interface=popover. — Mehul Mali, Jul 04 '19 at 11:35

Christian Keven · Answer 3 · 2020-12-08T14:37:59.347

The code below works.

In template (HTML)

<ion-button (click)="openSelectList()"></ion-button>
 <ion-select #countryList (ionChange)='setCountry($event)' hidden="true">
    <ion-select-option value="1">Egypt</ion-select-option>
    <ion-select-option value="2">Kuwait</ion-select-option>
</ion-select>

In .ts

@ViewChild('countryList') selectRef: IonSelect;
   ...

   openSelectionList() {
     setTimeout(()=>{
       this.selectRef.open();
     }, 2);
   }

   setCountry(event) { console.log('Selected country is ', event.detail.value) }

How to pop out ion-select using different button

3 Answers3

html

ts

Linked