How to pop out ion-select using different button in ionic-4

Open ionic select from any third party event like button click or you need to open select automatically when page loads we can use IonSelect from @ionic/angular package.

If you are looking solution for ionic-3 you can check my answer here.

https://stackoverflow.com/questions/48656225/how-to-pop-out-ion-select-using-different-button/

Get Paresh Gami’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

html

<ion-content>
 <ion-item [hidden]='hideList'>
     <ion-label>Choose Country</ion-label>
     <ion-select placeholder="Country" #countryList     (ionChange)='setCountry()'>
   <ion-select-option value="1">India</ion-select-option>
   <ion-select-option value="2">Japan</ion-select-option>
   <ion-select-option value="3">Sri Lanka</ion-select-option>
   <ion-select-option value="4">Qatar</ion-select-option>
     </ion-select>
 </ion-item>
<ion-button ion-button block (click)='displayCountry()'>Pop Out Select</ion-button>
</ion-content>

ts

import { Component, ViewChild } from '@angular/core';
import { IonSelect } from '@ionic/angular';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  hideList = true;
 
  @ViewChild('countryList') countrySelectRef: IonSelect;
   
  constructor() {
  }
  displayCountry() {
     this.countrySelectRef.open();
  }
}