Ionic4 - Popover


#1

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?

Thanks,
Oliver


#2

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() {
    this.pop.dismiss();
  }

}

HTML of the popover message page

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


#3

And some other kind of error:

src/app/xxxx/xxxx.page.ts(18,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: https://beta.ionicframework.com/docs/api/popover#properties


#4

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

#5

But it in the official BETA docs:

keyboardClose

Attribute: keyboard-close Type: boolean

leaveAnimation

Attribute: leave-animation Type: AnimationBuilder

Animation to use when the popover is dismissed.

mode

Attribute: mode Type: string

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

overlayId

Attribute: overlay-id Type: number


#6

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

I guess you could submit an issue/PR to correct it in https://github.com/ionic-team/ionic-docs


#7

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


#8

PopoverController.dismiss