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

Note: We also publish our tutorials on Medium and If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub

Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.

comments powered by Disqus Protection Status