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 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.
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.
In the above screen, click on the Show notification button, the following screen appears in your browser. Here, you can see the popover notification.