Ionic 5 Action Sheet | Angular Tutorial

In this Ionic 5/4 tutorial, we will implement the Action Sheet menu in the Ionic 5 application. The action sheet menu is open by sliding up from the bottom of the view.

Action sheet menu is added to provide some action controls to the user which pops up and gets visible which takes no space on view at normal.  An Action Sheet is a dialog that displays a set of options. It emerges on top of the app’s content and must be manually dismissed by the user before they can continue interaction with the app.

Here we are going to implement an Action Sheet control in Ionic Angular application. An Action sheet control is created by importing the ActionSheetController class methods.

Adding an Action Sheet in Ionic Application

In the Home controller class, import the ActionSheetController class available in @ionic/angular. Then add in the class constructor() method to initialize its methods and make them available to be used in the component class.

// home.page.ts
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(
    private actionSheet: ActionSheetController
  ) { }

  ...
}

Now, we will create different actions on the sheet control by using the create() method, it returns a promise. The create() method has the following format:

openActionSheet() {
    this.actionSheet.create({
      header: 'Albums',
      cssClass: 'my-custom-class',
      buttons: [
        {
          text: 'Share',
          icon: 'share',
          handler: () => {
            console.log('Share clicked');
          }
        }
      ]
    }).then(res => {
      res.present();
    });
  }

The buttons property takes an Array of the objects where each object defines an action triggered in the handler callback method.

Properties of the create() method

Let’s have a look at properties available on the create() method:

• animated : If true, the action sheet will animate.
• backdropDismiss : If true, the action sheet will be dismissed when the backdrop is clicked.
• buttons : An array of buttons for the action sheet.
• cssClass : Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
• enterAnimation : Animation to use when the action sheet is presented.
• header : Title for the action sheet.
• keyboardClose : If true, the keyboard will be automatically dismissed when the overlay is presented.
• leaveAnimation : Animation to use when the action sheet is dismissed.
• mode : The mode determines which platform styles to use "ios" | "md"
• subHeader : Subtitle for the action sheet.
• translucent : If true, the action sheet will be translucent. It only applies when the mode is "ios" and the device supports backdrop-filter.

Properties available for buttons

The buttons property of create() method supports the following

• text : Text of Action button.
• role : Role defined on the button; ‘cancel‘ | ‘destructive‘ | ‘selected‘ ;
• icon : Ionic name of the action button.
• cssClass : Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
• handler : Callback function returns promise on action click.

Finally, update the openActionSheet() method with multiple actions

openActionSheet() {
    this.actionSheet.create({
      header: 'Albums',
      cssClass: 'my-custom-class',
      buttons: [{
        text: 'Share',
        icon: 'share',
        handler: () => {
          console.log('Share clicked');
        }
      }, {
        text: 'Play (open modal)',
        icon: 'caret-forward-circle',
        handler: () => {
          console.log('Play clicked');
        }
      }, {
        text: 'Favorite',
        icon: 'heart',
        handler: () => {
          console.log('Favorite clicked');
        }
      }, {
        text: 'Cancel',
        icon: 'close',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      }]
    }).then(res => {
      res.present();
    });
  }

Now, add a button in the home.page.html file. Just add a button or link on click of which you want to show the action sheet buttons:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic Action Sheet Demo
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <ion-button color="primary" (click)="openActionSheet()">Show Action Buttons</ion-button>
  </div>
</ion-content>

Now in the home.page.ts class file import ActionSheetController and add in the constructor to use its create() method.

Add the openActionSheet() method to call create() which tales header property to label action sheet buttons.

Conclusion

That’s it we have implemented Action sheet control in the Ionic application and also discussed properties and events available.