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
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
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>
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: ion-popover: iOS / Android Popover UI Dialog Component
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;
}
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 https://github.com/ionic-team/ionic-docs
Did you figure out how to close a popover. Been stuck on this for a week!
PopoverController.dismiss
You have to pass the controller withing the Props object.