PopoverController Ionic 4?

Question

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.

Solution

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 {}

Comments

[Dunny]

Thanks, that got me a bit further. I've now got "Error: Uncaught (in promise): Error: No component factory found for PopupMenuComponent. Did you add it to @NgModule.entryComponents" and I've tried adding the above component is AppModule and the PageModule

[Idrees Khan]

@Dunny check my edited answer. If it doesn't work simply register the popover the page module that you are calling in and remove the single quotes from component: 'PopupMenuComponent' add PopupMenuComponent directly as they both will be apart of the same module

[Idrees Khan]

@Dunny check ionic conference app github.com/ionic-team/ionic-conference-app/blob/…

[Anjil Dhamala]

@DotNetDreamer Could you help me understand this line? "return await popover.present();" what are we waiting for before returning? Returning popover.present() returns a promise. But what does awaiting popover.present() and returning it return?