Skip to main content
Mapagam

Working with Popover and Action Sheet

1. Creating Popover

Example: Basic Popover

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public popoverCtrl: PopoverController) {}

  presentPopover(event: any) {
    let popover = this.popoverCtrl.create('PopoverPage');
    popover.present({
      ev: event
    });
  }
}
Property Description Default
component The component to load in the popover Required
cssClass Additional CSS class for the popover None
event The event that triggered the popover None
showBackdrop Whether to show the backdrop true
backdropDismiss Whether to dismiss on backdrop click true

2. Positioning Popover

Property Values Description
position 'top', 'bottom', 'left', 'right' Determines the initial position of the popover relative to its trigger element.
reference 'event', 'element' Defines how the popover's position is calculated. 'event' uses the event coordinates, 'element' uses the trigger element's position.
side 'start', 'end', 'center' Adjusts the popover's alignment along the axis perpendicular to its position.

Example: Basic Popover Positioning

<ion-popover trigger="popoverButton">
  <ion-content>
    <ion-list>
      <ion-item>Option 1</ion-item>
      <ion-item>Option 2</ion-item>
    </ion-list>
  </ion-content>
</ion-popover>
Note: The popover will automatically adjust its position if it would overflow the screen boundaries.

3. Dismissing Popover

Method Description Parameters Notes
dismiss() Closes the popover and optionally passes data back to the component that opened it data?: any, role?: string Can be called from within the popover component or via a reference to the popover instance
onDidDismiss() Registers a callback that fires after the popover is dismissed callback: (data?: any, role?: string) => void Useful for handling logic after popover is closed, such as updating state or triggering actions

Example: Dismissing Popover with Data

import { Component } from '@angular/core';\nimport { PopoverController } from 'ionic-angular';\n\n@Component({\n  selector: 'page-home',\n  templateUrl: 'home.html'\n})\nexport class HomePage {\n  constructor(public popoverCtrl: PopoverController) {}\n\n  presentPopover() {\n    const popover = this.popoverCtrl.create(PopoverPage);\n    popover.present();\n\n    popover.onDidDismiss((data) => {\n      console.log('Popover dismissed with data:', data);\n    });\n  }\n}\n\n@Component({\n  template: `\n    <ion-content>\n      <ion-item (click)=\"dismissPopover()\">Close</ion-item>\n    </ion-content>\n  `\n})\nexport class PopoverPage {\n  dismissPopover() {\n    this.popoverCtrl.dismiss({\n      action: 'close',\n      timestamp: new Date().toISOString()\n    });\n  }\n}
Note: The dismiss() method can be called with optional data and role parameters. These are useful for passing information back to the component that opened the popover.

4. Creating Action Sheet

Example: Basic Action Sheet

import { Component } from '@angular/core';
import { ActionSheetController } from '@ionic/angular';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {

  constructor(private actionSheetController: ActionSheetController) {}

  async presentActionSheet() {
    const actionSheet = await this.actionSheetController.create({
      header: 'Albums',
      buttons: [
        {
          text: 'Delete',
          role: 'destructive',
          icon: 'trash',
          handler: () => {
            console.log('Delete clicked');
          }
        },
        {
          text: 'Share',
          icon: 'share',
          handler: () => {
            console.log('Share clicked');
          }
        },
        {
          text: 'Cancel',
          icon: 'close',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    await actionSheet.present();
  }
}
Property Description Values
header Header text for the action sheet string
buttons Array of button configurations Array<ActionSheetButton>
cssClass Custom CSS class for styling string
backdropDismiss Whether to dismiss on backdrop tap boolean
Note: The role property on buttons can be used to define special behaviors like destructive or cancel.

5. Configuring Action Buttons

Property Description Values Notes
text Text to display on the button string Required
icon Icon to display on the button string Optional, uses Ionicons
handler Function to execute when button is clicked () => void Optional, can return false to prevent dismissal
role Role of the button (e.g., cancel, destructive) cancel | destructive | secondary Optional, affects styling and behavior
cssClass Custom CSS classes to apply to the button string | string[] Optional, for custom styling

Example: Basic Action Button Configuration

const actionSheet = await actionSheetController.create({
  header: 'Album Actions',
  buttons: [
    {
      text: 'Share',
      icon: 'share-outline',
      handler: () => {
        console.log('Sharing album');
      }
    },
    {
      text: 'Delete',
      icon: 'trash-outline',
      role: 'destructive',
      handler: () => {
        console.log('Deleting album');
      }
    },
    {
      text: 'Cancel',
      icon: 'close-outline',
      role: 'cancel'
    }
  ]
});

6. Using Destructive Actions

Action Description Usage
cssClass Applies a CSS class to the popover or action sheet for styling cssClass: 'destructive-action'
role Defines the role of the action (e.g., 'destructive') role: 'destructive'

Example: Destructive Action in Action Sheet

<ion-action-sheet>
  <ion-action-sheet-button role="destructive">
    Delete Item
  </ion-action-sheet-button>
</ion-action-sheet>
Note: The role attribute is used to indicate destructive actions and can be styled accordingly.

7. Adding Cancel Button

Property Values Description
cancel true | false If true, a cancel button will be added to the popover or action sheet.
cancelText string Text for the cancel button (default: "Cancel").

Example: Adding Cancel Button to Action Sheet

import { ActionSheetController } from '@ionic/angular';

constructor(private actionSheetController: ActionSheetController) {}

async presentActionSheet() {
  const actionSheet = await this.actionSheetController.create({
    header: 'Albums',
    cancelButton: {
      text: 'Cancel',
      role: 'cancel'
    },
    buttons: [
      {
        text: 'Delete',
        role: 'destructive',
        icon: 'trash'
      },
      {
        text: 'Share',
        icon: 'share'
      }
    ]
  });
  await actionSheet.present();
}

8. Customizing Action Sheet

Property Values Description
header string Text to display as the header of the action sheet
subHeader string Text to display as the sub-header of the action sheet
cssClass string | string[] Custom CSS class to apply to the action sheet
backdropDismiss boolean If true, the action sheet will close when tapping the backdrop
animated boolean If true, the action sheet will animate when opening/closing
mode 'ios' | 'md' Mode of the action sheet (iOS or Material Design)

Example: Customizing Action Sheet Properties

<ion-action-sheet
  header="Album Options"
  subHeader="Modify your album"
  cssClass="custom-action-sheet"
  backdropDismiss="true"
  animated="true"
  mode="md"
></ion-action-sheet>
Note: The cssClass property allows for deep customization of the action sheet's appearance using CSS.
Warning: The mode property should match the app's overall theme to maintain consistency.

9. Implementing Popover with Inline

Example: Basic Inline Popover

import { Component } from '@angular/core';
import { IonPopover } from '@ionic/angular';

@Component({
  selector: 'app-popover-inline',
  template: `
    <ion-button (click)="openPopover($event)">Open Popover</ion-button>
    <ion-popover trigger="popover-trigger" [dismissOnSelect]="true">
      <ion-content>
        <ion-list>
          <ion-item (click)="selectOption('option1')">
            Option 1
          </ion-item>
          <ion-item (click)="selectOption('option2')">
            Option 2
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-popover>
  `
})
export class PopoverInlineComponent {
  openPopover(event: any) {
    // Trigger popover
  }

  selectOption(option: string) {
    console.log('Selected:', option);
  }
}
Property Values Description
trigger string | HTMLElement Element that triggers the popover
dismissOnSelect true | false Whether to dismiss popover on item selection
size cover | auto Size of the popover
Note: The trigger property can be a string ID or an HTML element reference.

10. Handling Action Sheet Events

Event Description Usage
didPresent Fires after the action sheet is presented 
actionSheet.onDidDismiss().then((data) => {
  console.log('Action sheet dismissed');
});
willDismiss Fires before the action sheet is dismissed 
actionSheet.onWillDismiss().then((data) => {
  console.log('Action sheet will dismiss');
});
didDismiss Fires after the action sheet is dismissed 
actionSheet.onDidDismiss().then((data) => {
  console.log('Action sheet dismissed with data:', data);
});

Example: Handling Action Sheet Events

import { ActionSheetController } from '@ionic/angular';

constructor(private actionSheetCtrl: ActionSheetController) {}

async presentActionSheet() {
  const actionSheet = await this.actionSheetCtrl.create({
    header: 'Albums',
    buttons: [
      {
        text: 'Delete',
        role: 'destructive',
        handler: () => {
          console.log('Delete clicked');
        }
      },
      {
        text: 'Share',
        handler: () => {
          console.log('Share clicked');
        }
      },
      {
        text: 'Cancel',
        role: 'cancel'
      }
    ]
  });

  actionSheet.onWillDismiss().then((data) => {
    console.log('Action sheet will dismiss with data:', data);
  });

  actionSheet.onDidDismiss().then((data) => {
    console.log('Action sheet dismissed with data:', data);
  });

  await actionSheet.present();
}

Was this article helpful?

Related Cheat Sheets