Ionic Cordova ActionSheet

The ActionSheet plugin shows a dialog containing a native list of options the user can choose from. Requires Cordova plugin: Cordova-plugin-actionsheet. We can add ActionSheet from ionic native plugin and ActionSheet from a controller.

It appears on top of the app’s content and must be manually dismissed by the user before they can resume interaction with the app.

We can have a button that will display on top of a current page with an option like select from a camera, Gallery. Or we can have a list of social networking option to select. In this articles, we will learn how to add ActionSheet through a native plugin.

Steps 1: Create a new project
ionic start actionSheet blank

Step 2: Install the required plugin
ionic cordova plugin add –save cordova-plugin-actionsheet
npm install –save @ionic-native/action-sheet

Step 3: Add actionSheet provider in app/app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
..
import { ActionSheet } from '@ionic-native/action-sheet';


@NgModule({
  declarations: [
   ...
  ],
  imports: [
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    ...
  ],
  providers: [
    ...
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    ActionSheet
  ]
})
export class AppModule {}

Step 4: Add our project user interface. Add following code in pages/home/home.html 

<ion-header>
  <ion-navbar>
    <ion-title>
      Action Sheet
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-img style="width: 100%; height: 350px;" src="./assets/imgs/quote.jpg"></ion-img>
  <p text-center> Share Image </p>
  <button ion-button full ion-button (click)="shareSocialNw()">Share</button>
</ion-content>

Step 5: We need to import and inject ActionSheet in home.ts  

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

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

  constructor(public navCtrl: NavController, private actionSheet: ActionSheet) {
  }

  shareSocialNw() {
    let buttonLabels = ['Share via Facebook', 'Share via Twitter'];

    const options: ActionSheetOptions = {
      title: 'What do you want with this image?',
      subtitle: 'Choose an action',
      buttonLabels: buttonLabels,
      addCancelButtonWithLabel: 'Cancel',
      androidEnableCancelButton: true,
      addDestructiveButtonWithLabel: 'Delete',
      androidTheme: 1,
      destructiveButtonLast: true
    };
    
    this.actionSheet.show(options).then((buttonIndex: number) => {
      console.log('Button pressed: ' + buttonIndex);
    });
  }
}

ActionSheetOptions

Param Type Details
buttonLabels string[] The labels for the buttons. Uses the index x
title string The title for the actionsheet (optional)
subtitle string The subtitle for the actionsheet (IOS only) (optional)
androidTheme number Range from Theme to be used on Android 1 to 5 (optional)