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.

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

Steps to get started

  1. Generate a new page using the command below
  1. Since now we have a page in place lets add few buttons in order to trigger the Action Sheet.
  2. 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>
<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>
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) }); } }
Action Sheet
Action Sheet
  1. 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. Triggering the Action Sheet using the show function.
  2. 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.

Interested in friends and am a Web Developer. Design Websites and Web Solutions in major Platforms, SEO Consultant