Install the Cordova and Ionic Native plugins:
$ ionic cordova plugin add cordova-plugin-actionsheet
Add this plugin to your app's module
import { ActionSheet } from '@ionic-native/action-sheet/ngx';
providers: [
StatusBar,
SplashScreen,
ActionSheet,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
]
<ion-button full (click)="doAction()">Show Action Sheet</ion-button>
$ ionic cordova plugin add cordova-plugin-actionsheet
$ npm install --save @ionic-native/action-sheet@beta
import { ActionSheet } from '@ionic-native/action-sheet/ngx';
StatusBar,
SplashScreen,
ActionSheet,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
]
Add a button to show your action sheet like below:
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:
