CODEWITHSUNDEEP
ionic-frameworkionic3angular6ionic4
Dunny
Dunny

Reputation: 153

PopoverController Ionic 4?

How does the PopoverController work in Ionic 4?

The current documentation is incorrect and there's no breaking changes for it?

const popover = this.popoverCtrl.create({
  component: 'PopupMenuComponent',
  ev: event
});

popover.present();

I've created a Component and when I try to present it, I receive the below error...

[ts] Property 'present' does not exist on type 'Promise<HTMLIonPopoverElement>'. Did you forget to use 'await'?

Thanks.

Upvotes: 2

Views: 13514

Answers (1)

Idrees Khan
Idrees Khan

Reputation: 7752

In your example, you didnt await it. As of Alpha-7 the create method returns a promise. You can find the latest documentation here. Take alook at this example:

import { Component } from '@angular/core';
import { PopoverController } from '@ionic/angular';

@Component({
    template: `
        <ion-list no-margin>
            <ion-item (click)="onDismiss()">Dismiss</ion-item>
        </ion-list>
    `
})
export class PopupMenuComponentPopover {
    constructor(private popoverCtrl: PopoverController) {

    }

    async onDismiss() {
        try {
            await this.popoverCtrl.dismiss();
        } catch (e) {
            //click more than one time popover throws error, so ignore...
        }

    }
}

And here is how to open it:

  async openPopover(args) {
    const popover = await this.popoverController.create({
      component: PopupMenuComponentPopover,
      ev: args,
      translucent: false
    });
    return await popover.present();
  }

Edit: here is you can call it:

@NgModule({
  ...
  declarations: [DashboardWebsiteMorePopover],
  entryComponents: [DashboardWebsiteMorePopover],
  ...
})
export class PopupMenuComponentModule {}

Upvotes: 3

Related Questions