How to pop out ion-select using different button
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();
}
}
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.