CODEWITHSUNDEEP
angularionic-frameworkionic2ionic4
Matteo
Matteo

Reputation: 1271

Angular and Ionic-v4 ion-select popover is not working

I would like to open ionSelect programmatically with the popover mode.

@ViewChild('selectNotificationList') selectNotificationList: IonSelect;

the methods for open a ion-select is:

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

The HTML is:

<ion-card slot="end" class="langCard">
    <ion-card-content>
        <ion-select interface ="popover"  (ionChange)="readNotification($event)" #selectNotificationList>
            <ion-select-option *ngFor="let message of notificationList let notificationIndex = index"  value="{{message.id}}">
                {{message.notificationOptions.body}}</ion-select-option>
        </ion-select>
    </ion-card-content>
</ion-card>

Upvotes: 1

Views: 2719

Answers (1)

Fabian N.
Fabian N.

Reputation: 3856

tl;tr Your approach works, just pass the mouse event along to get the popover instead of an alert.
(tested with Angular 6.1.7 and Ionic 4.7.4)

I build a little mock app to test this: https://stackblitz.com/edit/ionic-v4-fhcnzr

Clicking the button opens the select with interface="alert" though...

Turns out, the console tells you everything: 

Select interface cannot be a "popover" without passing an event. 
Using the "alert" interface instead

After passing the click event from the button along...

clickNotificationNumber(event: MouseEvent) {
    this.selectNotificationList.interface = 'popover';
    this.selectNotificationList.open(event);
}

...the popover appeared beside the mouse as expected.

Upvotes: 7

Related Questions