Javatpoint Logo
Javatpoint Logo

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

notifications.component.html

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.

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.

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

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

Ionic Popover

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

Ionic Popover
Next TopicIonic Progress Bar




Help Others, Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA