Ionic 4 action sheet tutorial with screenshots

Install the Cordova and Ionic Native plugins:

$ ionic cordova plugin add cordova-plugin-actionsheet 

$ npm install --save @ionic-native/action-sheet@beta

Add this plugin to your app's module

import { ActionSheet } from '@ionic-native/action-sheet/ngx';

providers: [
      StatusBar,
      SplashScreen,
      ActionSheet,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
]

Add a button to show your action sheet like below:

<ion-button full (click)="doAction()">Show Action Sheet</ion-button>

It will display like below screenshot:

Now add below method in your component:

doAction() {

const 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',

addDestructiveButtonWithLabel: 'Delete',

destructiveButtonLast: true

};

this.actionSheet.show(options).then((buttonIndex: number) => {

console.log('Button pressed: ' + buttonIndex);

});

}

Now build your app using:

ionic cordova build android

or 

ionic cordova run android to direcly test in android device

after opening the app if you click on button SHOW ACTION SHEET

your action sheet will look like this: