Ionic4 - Popover

How the f*** is it possible to open a popover?

The documentation sucks and no real helpful examples.

Does anyone have a solution, if the documentation can’t provide a angular lazy loading exmaple?


1 Like

Import the lazy load module the same way you would a modal. (Ie with entryComponents).
Controller of the page that holds the popover element

export class PopoverButtonComponent {

  constructor(private pop: PopoverController) { }

  showPopover(event: Event): Promise<void> {
    return this.pop.create({ component: PopoverPage, ev: event,
                             componentProps: {message: 'message', popoverController: this.pop} })
                   .then(popover => popover.present());

popover messaqge page controller

export class PopoverPage {

  message = '';
  pop: PopoverController;

  constructor(navParams: NavParams) {
    this.message = navParams.get('message');
    this.pop = navParams.get('popoverController');

  close() {


HTML of the popover message page

<div style="white-space: pre-wrap;" padding>{{message}}</div>
<ion-button fill="clear" (click)="close()">OK</ion-button>

1 Like

And some other kind of error:

src/app/xxxx/,7): error TS2345: Argument of type ‘{ component: typeof MsaInstancesInfoPage; ev: any; translucent: true; mode: string; componentProp…’ is not assignable to parameter of type ‘PopoverOptions’.
Object literal may only specify known properties, and ‘mode’ does not exist in type ‘PopoverOptions’.

Even though it’s been documented:

You could have a look at the code definition to solve your issue:

export interface PopoverOptions {
   component: ComponentRef;
   componentProps?: ComponentProps;
   showBackdrop?: boolean;
   enableBackdropDismiss?: boolean;
   translucent?: boolean;
   enterAnimation?: AnimationBuilder;
   leaveAnimation?: AnimationBuilder;
   cssClass?: string | string[];
   event?: Event;
   delegate?: FrameworkDelegate;
1 Like

But it in the official BETA docs:


Attribute: keyboard-close Type: boolean


Attribute: leave-animation Type: AnimationBuilder

Animation to use when the popover is dismissed.


Attribute: mode Type: string

The mode determines which platform styles to use. Possible values are: "ios" or "md" .


Attribute: overlay-id Type: number

Maybe the doc isn’t up-to-date anymore, you know, beta

I guess you could submit an issue/PR to correct it in

Did you figure out how to close a popover. Been stuck on this for a week!


1 Like

You have to pass the controller withing the Props object.

1 Like