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.

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
  2. 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.
  3. Since now we have a page in place lets add few buttons in order to trigger the Action Sheet.
  4. Add this block of code on your action-sheet-demo.html page. It should look like this.
  5. Once you have added the button lets hook it up to some event listener which will listen for the Action Sheet being triggered.
  6. 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.
  7. After you are done with this you can go ahead and use the following command in order to run the code in an emulator.
  8. This should open up the emulator and you should see something like below

    Action Sheet

    Action Sheet

  9. 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.


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.

Also published on Medium.

Join our 2500+ fellow readers

Join our 2500+ fellow readers

Joining our mailing list will for sure keep you at the top of Web Development Ecosystem. Connect with us and also other fellow developers.

You have Successfully Subscribed!

Pin It on Pinterest

Share This