Ionic action sheet tutorial / How to use Ionic action sheet?

Ionic action sheet tutorial / How to use Ionic action sheet? / Ionic action sheet example / Example of ionic action sheet

An Ionic Action Sheet is a dialog that displays a set of options to user. It appears on the top of the applications content and user need to dismiss sheet in order to resume their interaction with the application. Our ionic action sheet tutorial will help you use action sheets in your applications.

Action sheet contains collection of buttons which provide option for user to take actions. Action sheets define two roles for buttons destructive and cancel. Button defined with cancel role will always be placed at the bottom of the action sheet.

How to use ionic action sheet in Angular?

Steps to user ionic action sheet in an angylar project.

Step 1: Import ActionSheetController from @ionic/Angular

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

Step 2 : Inject the dependency of ActionSheetController in the consstructor

constructor(public actionSheetController: ActionSheetController) {}

Step 3: Declare a method to display action sheet.

async presentActionSheet() {
  const actionSheet = await this.actionSheetController.create({
    header: 'Actions',
    cssClass: 'my-custom-class',
    buttons: [{
      text: 'Delete',
      role: 'destructive',
      icon: 'trash',
      handler: () => {
        console.log('Delete clicked');
      }
    }, {
      text: 'Share',
      icon: 'share',
      handler: () => {
        console.log('Share clicked');
      }
    }, {
      text: 'Open',
      icon: 'caret-forward-circle',
      handler: () => {
        console.log('Open clicked');
      }
    } , {
      text: 'Cancel',
      icon: 'close',
      role: 'cancel',
      handler: () => {
        console.log('Cancel clicked');
      }
    }]
  });
  await actionSheet.present();
}

Step 4: Call this method on user action in which you want to display these action sheet options.

For our articles on Ionic , Please visit Ionic Tutorials section of our website