Ionic 2 - Action Sheet Example with Cordova and Ionic Native 3.x+


In this tutorial we are going to cover how to create and display an Action Sheet with a detailed example using Ionic 2 (Or Ionic 3) framework .

Action Sheets are used to dispaly a set of buttons and actions for the user to choose from .


First create a new Ionic 2 project using the Ionic CLI (I'm using CLI v3).You can also use an existing app.

ionic start ActionSheetExample blank 

Next install the ActionSheet Cordova plugin and Ionic Native wrapper .

ionic cordova plugin add --save cordova-plugin-actionsheet
npm install --save @ionic-native/action-sheet

Next open src/app/app.module.ts and add ActionSheet to the list of providers .

import { ActionSheet } from '@ionic-native/action-sheet';

declarations: [
imports: [
bootstrap: [IonicApp],
entryComponents: [
providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler}
export class AppModule {}

Open src/pages/home/home.html then add a button .

<button ion-button (click)="openActionSheet()" class="button">Open Action Sheet</button>

Then in src/pages/home/home.ts :

Import and inject ActionSheet

import { ActionSheet, ActionSheetOptions } from '@ionic-native/action-sheet';

export class ActionSheetPage {

constructor(private actionSheet: ActionSheet) {

/* ...*/ 

Next implement openActionSheet() method

    let buttonLabels = ['Button 0', 'Button 1'];

    const options: ActionSheetOptions = {
        title: 'Action Sheet Title',
        subtitle: 'Choose an action',
        buttonLabels: buttonLabels,
        addCancelButtonWithLabel: 'Cancel',
        addDestructiveButtonWithLabel: 'Delete',
        destructiveButtonLast: true
    }; number) => {
        console.log('Button pressed: ' + buttonIndex);

You can then implement the logic of each button on the promise returned by based on the clicked button index .

Now add a target platform (Android ,iOS or Windows Phone) and run your app using an emulator or real device .

ionic cordova platform add android 
ionic run android 


We have seen how to use a Cordova plugin to create and show the native ActionSheet UI component .We can also use Ionic's own implementation of the Action Sheet ,check this tutorial:

Ionic 2/Ionic 3 ActionSheet Component Controller

About the Author

Techiediaries is a website dedicated to bring you tutorials for the latest web technologies

comments powered by Disqus Protection Status