How to create an Ionic popover

I saw a few examples of how to set up a popover in an Ionic app, but they all appeared to be missing something. After I got it to work, I decided to share my recipe.

In this example, I also want to give information (an ID number) to the popover and utilize it to select what information to display in the popover.

In Ionic, there is no such thing as a “page”; this is simply a component with a route to it. The ionic cli may build either a page or a component; however, because a popover does not require a route, we will generate a component.

Step 1:-

Set Up Ionic in your environment

Step 2:-

Create a new blank project using the following command

ionic g component popovers/mypop

Step 3:-

Add the following code in your mypop.component.ts

import { Component } from '@angular/core';
import { PopoverController } from "@ionic/angular";

@Component({
  selector: 'app-mypop',
  templateUrl: './mypop.component.html'
})
export class MypopComponent {
  persoon: any;
  constructor (
    private popover: PopoverController
  ) { }

  ClosePopover() {
    this.popover.dismiss();
  }
}

Step 4:-

Add the following code in your mypop.component.html

<ion-card class="person-modal">
  <ion-card-content >
    <h3 >{{person.name}}</h3>
    <div class="user-info">
      <p class="item-description">
        <ion-text [innerHTML]="person.summary"></ion-text>
      </p>
    </div>
  </ion-card-content>
</ion-card>

Declare in the app
This component must also be declared in my app. I would have believed that because I am only using this popover on one page, I could define it on the module for that page; but, this does not appear to work. So I added the following to my app.module.ts:

import { MypopComponent} from "./popovers/mypop/mypop.component";
@NgModule({
  declarations: [MypopComponent],     
  entryComponents: [MypopComponent],

NOTE: you likely have other declarations or entryComponents already; so these will just be added to those.

Use the popover

All that remains is to activate the popover.

Add the following to your page’s mypage.page.ts file:

import { PopoverController } from '@ionic/angular';
import { PersoonComponent } from "../popovers/persoon/persoon.component";

Then include the following function in your class definition:

async CreatePopover(ev: any, i: number) {
  const pop = await this.popover.create({
    component: MypopComponent,
    cssClass: 'my-custom-class',
    event: ev,
    translucent: true,
    componentProps: {
      "person": this.persons[i],
    }
  });
  return await pop.present();
}

Then put it in your mypage.page.html like this:

<ion-grid padding>
  <ion-row wrap *ngIf="personCount > 0" >
    <ion-col size="3" *ngFor="let x of persons"; let i = index">
      <ion-card (click)="CreatePopover($event, i)">
        <app-image-shell class="user-image" animation="spinner" [src]="'data:image/jpeg;base64,' + persons[i]['image']">
          <app-aspect-ratio [ratio]="{w:1, h:1}"></app-aspect-ratio>
        </app-image-shell>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>

 

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories