In this Ionic tutorial, you will learn how to implement and create popovers in the ionic application based on Angular Framework. We will understand and implement popovers in Ionic, using Cordova and Capacitor.

Ionic’s latest version provides a wide variety of UI toolkits and facilitates the creation of high-quality cross-platform applications. In this guide, we will target to provide a detailed walkthrough for creating a popover example in Ionic.

Popovers is a critical UI component, that significantly enhances the user experience by displaying a small interface on top of the current page as an overlay. Popovers can contain relevant information, options, or actions without taking the user away from the current context and also save a lot of space in UI screens.

How to Create Popovers in Ionic Angular App?

Let’s follow these easy step-by-step tutorial to create a sample Popover example:

 

Installation and Setup

To begin with, you need to install Ionic, Cordova, and Capacitor. Open your terminal or command prompt and run the following commands:

npm install -g @ionic/cli
npm install -g cordova

 

Project Creation

After successful installation, create a new Ionic project using the following command:

ionic start myPopoverApp blank --type=angular

 

Implementing Popovers in Ionic 6

Next, you’ll need to create a new component for the popover. In your terminal or command prompt, use the following command:

ionic generate component PopoverComponent

This command creates a new folder named PopoverComponent in your project’s app directory.

 

The Popover Component

Next, let’s write the code for the popover component. The popover component code is written in the popover.component.ts file:

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

@Component({
  selector: 'app-popover',
  templateUrl: './popover.component.html',
  styleUrls: ['./popover.component.scss'],
})
export class PopoverComponent implements OnInit {

  constructor(private popoverController: PopoverController) { }

  ngOnInit() {}

  closePopover() {
    this.popoverController.dismiss();
  }
}

In the above code, we first import the required modules and declare our component. The PopoverController Ionic Angular allows us to control the popover’s behaviour. Then we inject PopoverController in the constructor, enabling us to call the dismiss method to close the popover when necessary.

 

Triggering the Popover

To display the popover, it must be triggered from another page. Here is how we can do it in the Home component:

import { Component } from '@angular/core';
import { PopoverController } from '@ionic/angular';
import { PopoverComponent } from '../popover/popover.component';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(public popoverController: PopoverController) {}

  async presentPopover(ev: any) {
    const popover = await this.popoverController.create({
      component: PopoverComponent,
      cssClass: 'my-custom-class',
      event: ev,
      translucent: true
    });
    return await popover.present();
  }
}

In the HomePage component, we again import PopoverController and the PopoverComponent we created earlier. We create a new method, presentPopover, which creates and presents the popover.

The create method on the PopoverController instance takes in an options object, where we specify the component, CSS class, the event triggering the popover, and its translucency.

 

Run the Project

With the popover implemented, you can now compile and run your Ionic 6 project. Run the following command in your terminal:

ionic serve

The command compiles your application and opens it in a web browser.

 

Conclusion

By following this guide, you’ve successfully implemented a popover in Ionic using Cordova. This not only enhances the user experience but also allows you to display additional information without cluttering the application interface.