ViewChild IonSelect dont work with popover

Hello everyone,

I work with Ionic v4.0 final release.
I try to call ion-select by viewchild with interface = ‘popover’ but dont work :frowning:
If i try with interface = ‘action-sheet’ or interface = ‘alert’, it’s work perfectly


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

    selector: 'app-home',
    templateUrl: '',
    styleUrls: [''],
export class HomePage {
    @ViewChild('mySelect') public myselect: IonSelect;
    public colorSelected = '#ff6600';

    open() {
        this.myselect.interface = 'popover';;


    <ion-title>Ionic Blank</ion-title>

    <ion-buttons slot="end">
        <ion-button color="primary" (click)="open()">
            <ion-icon slot="icon-only" name="color-palette" [ngStyle]="{'color': colorSelected}"></ion-icon>

            <ion-select #mySelect [hidden]="true" [(ngModel)]="colorSelected">
                <ion-select-option value="#ff6600">Orange</ion-select-option>
                <ion-select-option value="#cccc00">Yellow</ion-select-option>
                <ion-select-option value="#000000">Black</ion-select-option>
                <ion-select-option value="#0066ff">Blue</ion-select-option>


Anyone have an idea ? I need popover :worried:

Thx !

1 Like

I’m facing the same issue, did you find a solution?


ViewChild expects the content to be a direct child of the component, which popovers are not. They get rendered at the root level.

What are you trying to do?