ViewChild IonSelect dont work with popover

Ionic Framework
1

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

TypeScript

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 {
    @ViewChild('mySelect') public myselect: IonSelect;
    public colorSelected = '#ff6600';

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

HTML

<ion-toolbar>
    <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>
            </ion-select>
        </ion-button>

    </ion-buttons>
</ion-toolbar>

Anyone have an idea ? I need popover :worried:

Thx !

1 Like
2

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

Thanks

3

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?