Ionic Action Sheets

An action sheet is a dialog that appears on top of the app's content and presents the user with a list of options to choose from. It's commonly used to provide context-based actions to the user, like edit, delete, share, or print.

Syntax

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Action Sheets
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-card-content>
      <p>Press the button below to open the Action Sheet:</p>
      <ion-button expand="full" (click)="openActionSheet()">Open Action Sheet</ion-button>
    </ion-card-content>
  </ion-card>
</ion-content>

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

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

  constructor(public actionSheetController: ActionSheetController) {}

  async openActionSheet() {
    const actionSheet = await this.actionSheetController.create({
      header: 'Choose an action',
      buttons: [{
        text: 'Edit',
        icon: 'pencil',
        handler: () => {
          console.log('Edit clicked');
        }
      }, {
        text: 'Delete',
        icon: 'trash',
        handler: () => {
          console.log('Delete clicked');
        }
      }, {
        text: 'Share',
        icon: 'share',
        handler: () => {
          console.log('Share clicked');
        }
      }, {
        text: 'Print',
        icon: 'print',
        handler: () => {
          console.log('Print clicked');
        }
      }, {
        text: 'Cancel',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      }]
    });

    await actionSheet.present();
  }

}

Example

In this example, we'll create an Ionic app with a single button that opens an action sheet with four options: edit, delete, share, and print. The user can choose any of these options, or cancel the action sheet.

Output

When the user opens the action sheet and chooses an option, the corresponding handler function is executed, and its message is logged to the console.

Explanation

The action sheet is defined using the create() method of the ActionSheetController class. The method takes an object with the following properties:

• header: the title of the action sheet.
• buttons: an array of buttons, each with the following properties:
  • text: the text to display on the button.
  • icon: the icon to display next to the button text.
  • handler: a function that is executed when the button is clicked.
  • role: the role of the button (optional). If set to "cancel", the button will be placed at the bottom of the action sheet and styled differently.

To open the action sheet, we call the present() method of the action sheet. This method returns a promise that resolves when the action sheet is dismissed.

Use

Use Ionic Action Sheets when you need to provide a context-based list of actions to the user. For example, you might use an action sheet to allow the user to edit, delete, or share a post in a social media app.

Important Points

• An action sheet is a dialog that presents the user with a list of options.
• An action sheet is defined using the ActionSheetController class.
• An action sheet has a header and a list of buttons.
• Each button has a text, an icon, and a handler function.
• The handler function is executed when the button is clicked.
• An action sheet can also have a cancel button.

Summary

In this tutorial, we learned how to create an Ionic app with an action sheet that presents the user with a list of options. We also learned how to define the action sheet using the ActionSheetController class and how to handle user input using the handler function.