Setting up Ionic 4 Popover component

0 Comments

Hello guys, Ionic 4 is in Release Candidate, but, very productive to develop any project right now! however, sometimes we have doubts about how its components works and how to config and apply these.

This post will focus in ion-popover, let´s see how it works and setup in your Ionic 4 project creating a Notifications message.

A Popover is a dialog that appears on top of the current page. It can be used for anything, but generally it is used for overflow actions that don't fit in the navigation bar.

Know more about ion-popover api on Ionicframework Docs: https://beta.ionicframework.com/docs/api/popover/

Create a notifications component

Unlike a Page, I advise you to create a Component because its only purpose will be to list the notifications of new messages, no routes needed! and it will be extended to receive Props() like a regular Angular component.

$ ionic g component notifications

Now that we've created the notifications.component, let's set the notifications.component.scss and notifications.component.html just an example of what will become your notifications:

notifications.component.scss

// notifications.component.scss
ion-list {
    &.list-ios {
        margin-bottom: 0;
    }
}

notifications.component.html

// notifications.component.html
<ion-list no-padding no-margin>
    <ion-list-header color="dark">
      <ion-label class="fw700">Notifications</ion-label>
    </ion-list-header>

    <ion-item color="primary" class="text-10" (click)="messages()">
      <ion-icon name="mail" color="light"></ion-icon>
      <ion-label>New Offer 25% OFF</ion-label>
    </ion-item>

    <ion-item color="light" class="text-10" (click)="messages()">
      <ion-icon name="mail-open" color="primary"></ion-icon>
      <ion-label>New Offer 15% OFF by month!</ion-label>
    </ion-item>

    <ion-item color="light" class="text-10" (click)="messages()">
      <ion-icon name="mail-open" color="primary"></ion-icon>
      <ion-label>New Offer 10% OFF by month!</ion-label>
    </ion-item>

    <ion-item color="primary" class="text-10" (click)="messages()">
      <ion-icon name="mail" color="light"></ion-icon>
      <ion-label>New Offer 35% OFF</ion-label>
    </ion-item>
</ion-list>

Creating a Popover calling your component

After created our notifications.component, let´s call and usage it configuring a ion-popover, follow the steps below:

Adding in your app.module.ts

// app.module.ts
...
import { NotificationsComponent } from './components/notifications/notifications.component';

@NgModule({
  declarations: [AppComponent, PopmenuComponent, NotificationsComponent],
  entryComponents: [NotificationsComponent],
  imports: [
...

Configuring presenting to use

// home-results.page.ts
import { NotificationsComponent } from './../../components/notifications/notifications.component';

...
..
.

async notifications(ev: any) {
    const popover = await this.popoverCtrl.create({
        component: NotificationsComponent,
        event: ev,
        animated: true,
        showBackdrop: true
    });
    return await popover.present();
}

Declare on view to call it

// home-results.page.html
<ion-button size="small" shape="round" color="medium" (click)="notifications()">
    <ion-icon name="notifications"></ion-icon>
    <ion-badge color="dark" slot="end">2</ion-badge>
</ion-button>

Well done! now we have our notifications.component configured with ion-popover :D

foodIonic2-preview03

foodIonic2-preview05

In case you are interested to buy our Ionic 4 Theme, the ionBooking 2:

Comments