Ionic 2 - Action Sheet Example with Cordova and Ionic Native 3.x+

Introduction


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 .

Steps


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';

@NgModule({
declarations: [
    MyApp,
    HomePage  
],
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    HomePage
],
providers: [
    StatusBar,
    SplashScreen,
    ActionSheet,
    {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) {

}   
openActionSheet(){}
/* ...*/ 

Next implement openActionSheet() method

openActionSheet(){
    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
    };

    this.actionSheet.show(options).then((buttonIndex: number) => {
        console.log('Button pressed: ' + buttonIndex);
    });
}

You can then implement the logic of each button on the promise returned by this.actionSheet.show(options) 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 

Conclusion


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 DEV.to. 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.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status