Ionic Popover

A popover is a small overlay that appears on top of the current page to show additional information. You can use it for anything, but it is generally used for additional actions that don't fit in the navigation bar. It allows us to present or gather information from the user very easily. It is commonly used in the following situation.

It shows additional information about the current view.
You can select a commonly used tool and configuration.
It gives the list of actions to perform inside of the current view.

Popover Controller

It is responsible for creating popover in the Ionic application. It uses create() method for creating popover. You can customize the controller by setting popover options in the create method.

Present () method

The present() method is used to present a popover notification on the popover instance. A click event needs to be passed in the present() method to position the popover. If you did not pass the event, the popover would be positioned in the center of the view.

Let us see step by step how to pass data from page to popover component.

Step 1: Create a new project. You can learn how to create a project in Ionic 4 from here.

Step 2: Create a popover custom component. There is no need to create a page because the purpose of creating a component is to list the notifications of new messages only. To do this, run the following command.

Step 3: After creating the notification component, open the following files, and insert the given code. You can change the code according to your needs.

notifications.component.scss

ion-list {
    &.list-ios {
        margin-bottom: 0;
    }
}

notifications.component.html

<ion-list class="ion-no-margin ion-no-padding">
    <ion-list-header color="dark" class="text-10">
      <ion-label class="fw700">Notifications</ion-label>
    </ion-list-header>

    <ion-item color="secondary" class="text-10">
      <ion-icon name="mail" color="light"></ion-icon>
      <ion-label>New Offer 30% OFF</ion-label>
    </ion-item>

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

    <ion-item color="secondary" class="text-10">
      <ion-icon name="mail" color="light"></ion-icon>
      <ion-label>New Offer 45% OFF</ion-label>
    </ion-item>

    <ion-item color="light" class="text-10">
      <ion-icon name="mail-open" color="primary"></ion-icon>
      <ion-label>New Offer 25% OFF on Credit Card!</ion-label>
    </ion-item>

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

Step 4: Next, after creating the notifications component, configure the app.module.ts file. Here, you need to import the notifications component and then, add it inside the @NgModule.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { NotificationsComponent } from './notifications/notifications.component';

@NgModule({
  declarations: [AppComponent, NotificationsComponent],
  entryComponents: [NotificationsComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 5: Open the home.page.ts file and add the following code. In this file, we can pass data from the home page to the popover component.

import { Component } from '@angular/core';
import { PopoverController } from '@ionic/angular';
import { NotificationsComponent } from '../notifications/notifications.component';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor(public popoverCtrl: PopoverController) { }
  async notifications(ev: any) {
    const popover = await this.popoverCtrl.create({
        component: NotificationsComponent,
        event: ev,
        animated: true,
        showBackdrop: true
    });
    return await popover.present();
  }
}

Step 6: Open the home.page.html file and add the following code.

<ion-header translucent>
  <ion-toolbar color="danger">
    <ion-title>Ionic Popover</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding" color="light">
  <h1>Popover Notification</h1>
  <ion-button size="small" shape="round" color="primary" (click)="notifications()">
    <ion-icon name="notifications"></ion-icon>Show
    <ion-badge color="dark" slot="end">2</ion-badge>
  </ion-button>
</ion-content>

Step 7: Now, run the application, and you will get the following screen.

In the above screen, click on the Show notification button, the following screen appears in your browser. Here, you can see the popover notification.