The ionic popover is a small overlay of content that is used to display on top of the current page to show secondary information. The ionic popover component is similar to tooltips; it is a pop-up dialog box where users can interact with an element.
We will demonstrate a simple example where users can click on the setting icon on the home page where can select a different option. Like the Ionic popover controller component, Ionic has lots of pre-built components, which we can ready to use like action-sheet, loading, toast controller, and more.
In this article, we’ll learn how to use the Ionic popover element, how we can sent and receive data to or from Ionic modal. At last we’ll explore how we can customize popover modal style.
Prerequisites:
To create and run an Ionic project, We need Nodejs and Ionic CLI already install in our system, if not then check how to install Nodejs and Ionic in Ubuntu. Ionic CLI allows us to create an Ionic project, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment. To install the Ionic CLI, open a terminal, and run the following command:
npm install -g @ionic/cliIonic popover example
Let’s first create an ionic project and add or generate a popover setting component. The setting component is the modal popover component where we allow users to select buttons among the buttons list.
Here’s a quick screenshot of what we’ll be building.
ionic start projectname blank --type=angular
ionic generate component settingAdd the following code in component setting.html
<ion-content>
<ion-list>
<ion-item (click)="wifiSetting()">
Wifi
</ion-item>
<ion-item (click)="eventFromPopover()()">
Information 2
</ion-item>
<ion-item (click)="logout()">
Logout
</ion-item>
</ion-list>
</ion-content>How to read data from page to modal popover component ?
In ionic 4 and below to retrieve the data passed into the componentProps, either set it as an @Input or access it via NavParams on the Modal popover component. But in ionic 5 and above, we don’t need both the above approaches to get data.
We can directly access data but it should have the same name in the modal component which we have passed to our modal component. Add the following code in setting.component.ts, here in ngOnInit we can directly NavParams get information from the page where we call our popover component.
import { Component, OnInit } from '@angular/core';
import { PopoverController, } from '@ionic/angular';
@Component({
selector: 'app-setting',
templateUrl: './setting.component.html',
styleUrls: ['./setting.component.scss'],
})
export class SettingComponent implements OnInit {
site;
constructor(
private popoverController: PopoverController) { }
ngOnInit() {
// this.siteInfo = this.navParams.get('site');
console.log(this.site);
}
wifiSetting() {
// code for setting wifi option in apps
this.popoverController.dismiss();
}
logout() {
// code for logout
this.popoverController.dismiss();
}
eventFromPopover() {
this.popoverController.dismiss('edupala.com');
}
}How to pass data from page to popover component
During the creation of a modal popover, data can be passed in through the componentProps. We can pass data individually or as an object. Here we are passing the site object which contains data about the site id and name. On our home page, we have to import our setting popover component.
In ionic 4 and below to get the data passed into the componentProps, either set it as an @Input or access it via NavParams on the Modal popover component. But in ionic 5 and above, we don’t need both the above approaches to get data. We can directly access data but it should have the same name in the modal component which we have passed to our modal component.
Add the following code in setting.component.ts, here in ngOnInit we can directly NavParams get information from the page where we call our popover component.
import { Component } from '@angular/core';
import { PopoverController } from '@ionic/angular';
import { SettingComponent } from '../setting/setting.component';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(private popoverController: PopoverController) { }
async settingsPopover(ev: any) {
const siteInfo = { id: 1, name: 'edupala' };
const popover = await this.popoverController.create({
component: SettingComponent,
event: ev,
cssClass: 'popover_setting',
componentProps: {
site: siteInfo
},
translucent: true
});
popover.onDidDismiss().then((result) => {
console.log(result.data);
});
return await popover.present();
/** Sync event from popover component */
}
}On the home page, we have a setting button that allows us to call our modal popover component. Add the following code to the home template page. We can also send data back from modal popover to page by using the dismiss method of the popover controller with parameter.
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Ionic 5 and above popover
</ion-title>
<ion-buttons slot="end">
<ion-button (click)="settingsPopover()">
<ion-icon name="settings"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
</ion-content>How to change ionic popover style ?
To apply the style to our ionic popover we have cssClass property attribute where we can add a custom class name. In our case, we have popover_setting as the custom name for the class and we need to add this style property on global.scss as.
.popover_setting .popover-content {
--min-width: 600px !important;
--min-height: 150px !important;
--ion-background-color: red;
--ion-text-color: #ffffff;
background-color: red;
}We have applied red color background and white color font for our ionic popover component. We can easily change the default width and height of our popover component as had applied above in global.scss
Conclusion
In this tutorial, we have demonstrated how to integrate our Ionic popover controller in our ionic project and how we can customize the ionic popover modal style in global.scss.
Related posts
- How to implement an ionic slider
- Complete guide on an ionic grid with an example
- How to implement an ionic alert controller.
- How to implement an ionic table with pagination.
- How to use ionic skeleton component.
- How to create a different ionic list.
Great Job!