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>

Answer 1

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();
    }
}

Answer 2

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.