Ionic 2 Action Sheet

Ionic 2 Action Sheet: Action Sheet is dialog that allows users to choose option from the set of options. Action Sheet is placed at the bottom of the screen and it is placed at the top of the app’s content, As it is placed on the top of the content so it needs to be dismissed before interaction the app content. Here in this tutorial we are going to explain how To create Ionic 2 Action Sheet. You can also use our online tool to see the output of the example.

Ionic 2 Action Sheet Example

Action Sheet is basically created using an array of buttons and these buttons have several properties such as Text, Handler, Role, Icon etc which can be used easily to add Text, Icons etc.

ActionSheet.create(opts) Method is used to create the Action Sheet in Ionic 2 Where you can pass all the options in first Argument. Let us create a very basic Action Sheet example –

• 1. HTML Part – It contains the Html Part.
• 2. Script Part – This contains typescript code for the actionsheet.

Now let us go one by one to understand the Action Sheets –

Html Part : demo.html

Html Part Contains the a button which calls the function openMenu() on click event. This is the template where you want to add the action sheet button.

<ion-content padding="">
  <h2>Action Sheets</h2>
  <button ion-button="" block="">
    Show Action Sheet
  </button>
</ion-content>

Html part contains the Layout of the page and we have created a button “Show Action Sheet” and we have called a function openMenu() to show menu, this function is defined in JavaScript Typescript – demo.ts file.

Script Part : demo.ts

Script Part contains the required resources to create Action Sheet, It contains the openMenu() function which is triggered on Button click to open the Action Sheet.

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

@Component({
  selector: 'demo-page',
  templateUrl: 'demo.html'
})
export class DemoPage {

  constructor(public actShtCtr: ActionSheetController) {

  }    
 
  openMenu() {
    let actionSheet = this.actShtCtr.create({
      title: 'My Action Sheet',
      cssClass: 'action-sheets-basic-page',
      buttons: [
        {
          text: 'Destructive',
          role: 'destructive',
          handler: () => {
            console.log('Destructive clicked');
          }
        },{
          text: 'Archive',
          handler: () => {
            console.log('Archive clicked');
          }
        },{
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
    }
      ]
    });
    actionSheet.present();
  }
}
          

Import ActionSheetController, add in constructor as above and call create() method with parameters. The main things required to use the ActionSheet is below-
1. importing ActionSheetController.
2. calling it in constructor.
Thus using the both steps you can create action sheet anywhere.

If you run the above example it will produce output something like this-

Download Demo

To download demo files click here – Download Ionic 2 Actionsheet

If you unzip the downloaded file, it contains folders Used to created the above demo-

• folder app
• folder pages

Options Available:

Instance Method

create(opts)

• opts(ActionSheetOptions)– Action Sheet Options are title, subtitle and array of buttons. There are basically following two types of options accepted by create method-
  • 1. ActionSheet Create Options
  • 2. ActionSheet Button Options

1. ActionSheet Create Options

Following ActionSheet Create Options Are Available –

2. ActionSheet Button Options

Following options for button are provided which can be used easily –

Ionic 2 ActionSheet With SubTitle | ICON | Css Class

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

@Component({
  selector: 'demo-page',
  templateUrl: 'demo.html'
})
export class DemoPage {
  constructor(public platform: Platform, public actShtCtr: ActionSheetController,public atrCtrl: AlertController) {

  }
    
 
  openMenu() {
    let actionSheet = this.actShtCtr.create({
      title: 'My Action Sheet',
      subTitle: ' Demo Subtile ',
      cssClass: 'action-sheets-basic-page',
      buttons: [
        {
          text: 'Destructive',
          role: 'destructive',
          icon: !this.platform.is('ios') ? 'trash' : null,
          cssClass:'yellow-color',
          handler: () => {
            console.log('Destructive clicked');
          }
        },{
          text: 'Archive',
          icon: !this.platform.is('ios') ? 'share' : null,
          cssClass:'blue-color',
          handler: () => {
            console.log('Archive clicked');
          }
        },{
          text: 'Cancel',
          role: 'cancel',
          icon: !this.platform.is('ios') ? 'close' : null,
          cssClass:'red-color',
          handler: () => {
            console.log('Cancel clicked');
          }
    }
      ]
    });
    actionSheet.present();
  }
}

If you run the above it will add custom color using custom css class and we have also added icons to the buttons. The output of the above example will be something like this-