How to Use Action Sheet in Ionic Native

Introduction to Action Sheet

There is always a need for the native list of user options from where a user can choose various options from. Action Sheet provides us with such option. This plugin triggers the native Action Sheet. There is also an option to use the Action Sheet which is just a high-level ionic component and can be invoked using Ionic Framework itself. Before we start these series let’s just evaluate that you have setup the workspace and are ready to take a leap of faith into Ionic Framework. I will recommend you to go through Ionic Native so that you are familiar with what we are trying to achieve using Ionic Native.

We also assume you already have the sample project in place so that you can go ahead and build it along with us. The sample Application can be cloned from the repository out here. You can see and play around with the code.

So let’s get started.

Installing Action Sheet Cordova Plugin

Since Action Sheet Native is a Cordova plugin and helps you to invoke the native action sheet of the specific OS. I will recommend you to go ahead and install it using the following commands.

cd IonicNativeSampleApp

# This needs to be installed in order to get the native plugin for action sheet
ionic cordova plugin add cordova-plugin-actionsheet

# Installing the Typescript ionic wrapper for action sheet
npm install --save @ionic-native/action-sheet

Since this plugin is a module, it will get added to your app’s module. This enables the app to recognize that this particular functionality is present in the application.

Let’s go ahead using the steps below in order to get started.

Steps to get started

  1. Generate a new page using the command below
  • ionic generate page ActionSheetSample
  1. The above command will generate a new page called ActionSheetSample, if you get a module file related to ActionSheetSample please go ahead and delete it for time being.
  2. Since now we have a page in place lets add few buttons in order to trigger the Action Sheet.
  3. Add this block of code on your action-sheet-demo.html page. It should look like this.
<ion-header> 
<ion-navbar>
<ion-title>ActionSheetDemo</ion-title>
</ion-navbar>
</ion-header> 
<ion-content padding>
<button ion-button>Button</button>
</ion-content>
  1. Once you have added the button lets hook it up to some event listener which will listen for the Action Sheet being triggered.
<ion-header> 
<ion-navbar>
<ion-title>ActionSheetDemo</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button (click)=”openActionSheet()”>Button</button> </ion-content>
  1. The method in order to invoke this can go as follows. We need to import ActionSheet and ActionSheetOptions into our component and then use the show method to open this ActionSheet. Follow the below code in order to understand it.
import { Component } from ‘@angular/core’;
import { NavController, NavParams } from ‘ionic-angular’;
import { ActionSheet, ActionSheetOptions } from ‘@ionic-native/action-sheet’;
/** * Generated class for the ActionSheetDemoPage page. * * See http://ionicframework.com/docs/components/#navigation for more info * on Ionic pages and navigation. */ 
let buttonLabelsToShow = [‘Share via Facebook’, ‘Share via Twitter’]; 
@Component({ selector: ‘page-action-sheet-demo’, templateUrl: ‘action-sheet-demo.html’, })
export class ActionSheetDemoPage { /** Action Sheet Options */ options: ActionSheetOptions = { title: ‘Share This Image with the World’, subtitle: ‘Choose from the various Options’, buttonLabels: buttonLabelsToShow, addCancelButtonWithLabel: ‘Cancel’, addDestructiveButtonWithLabel: ‘Delete’, destructiveButtonLast: true } constructor(private actionSheet: ActionSheet, public navCtrl: NavController, public navParams: NavParams) { } ionViewDidLoad() { console.log(‘ionViewDidLoad ActionSheetDemoPage’); } openActionSheet() { this.actionSheet.show(this.options).then((buttonClickedIndex: number) => { console.log(‘Button pressed is’ + buttonClickedIndex) }).catch((err) => { console.log(err) }); } }
  1. After you are done with this you can go ahead and use the following command in order to run the code in an emulator.
  • ionic cordova emulate android
  1. This should open up the emulator and you should see something like below
Action Sheet
  1. Action Sheet
  2. There are other aspects of the code that we should have a look at while covering Action Sheet. Have a read at the Code Dissection Section.

Code Dissection

If you look at the code above you can figure out that we have three part of the code.

  1. Declaring options for the Action Sheet. This can help you to get ahead in order to store the different options for the action sheet.
  2. Triggering the Action Sheet using the show function.
  3. Apart from this, you can also see that we have something called ActionSheetOptions. This helps us in initializing various options for the action sheet. If you open up the file with ActionSheetOptions you can see the various options in play.

Conclusion

This tutorial is pretty comprehensive with respect to the setup of the application as well as the various outputs related to the ActionSheet plugin. We will proceed from here creating various new tutorials with each and every Native Plugin. Wait for the next installment. From the next installment, we will just proceed to build the application rather than concentrating on most of the setup features. We will also have video Tutorials soon available which will deal with detail code dissection.


Originally published at The Web Juice.

Like what you read? Give Shiv Kumar Ganesh a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.