Table of Contents

Example of making a custom popover

  1. Go to (IMAB) Pages page and create a page with the name My Menu. On the Page Header tab then select the Layout Type option Without Header and write menu codes on Page Content (HTML5)
    	<ion-item button>Learn Ionic</ion-item>
    	<ion-item button>Documentation</ion-item>
    	<ion-item button>Showcase</ion-item>
    	<ion-item button>GitHub Repo</ion-item>

  2. and go to the page where the popover button will be placed and write popover button code on Page Content (HTML5) field
    <ion-button (click)="openPopover()" >Open Popover</ion-button>
    and function on Other Functions (TypeScript) field
    async openPopover(ev: any) {
        const popover = await this.popoverController.create({
          component: MyMenuPage,
        await popover.present();
    and import My Menu page

Last edit: 2021-09-16 01:53:31


For any question about products, please contact email support is: and