uiactionsheet


Use of Actionsheet in Ionic 2


I am trying to test all Ionic 2 Components but I don't know how to use the Actionsheets.
I have this code:
actionSheet.html :
<button (click)="showActionSheet()">Show Actionsheet</button>
actionSheet.js :
import {Page, NavController} from 'ionic/ionic';
import {ActionSheet} from 'ionic/ionic';
#Page({
templateUrl: 'app/actionSheet/actionSheet.html'
})
export class ActionSheetPage {
constructor(nav: NavController) {
this.nav = nav;
}
showActionSheet() {
ActionSheet.open({
buttons: [
{ text: 'Share This' },
{ text: 'Move' }
],
destructiveText: 'Delete',
titleText: 'Modify your album',
cancelText: 'Cancel',
cancel: () => {
console.log('Canceled');
},
destructiveButtonClicked: () => {
console.log('Destructive clicked');
},
buttonClicked: (index) => {
console.log('Button clicked: ', index);
}
}).then(actionSheetRef => {
// Action sheet was created and opened
this.actionSheetRef = actionSheetRef;
// this.actionSheetRef.close() to close it
})
}
}
When I click on the button I have this error:
19 010801 error EXCEPTION: Error during evaluation of "click" 20
010804 error ORIGINAL EXCEPTION: TypeError: ionic_2.ActionSheet.open
is not a function 21 010806 error ORIGINAL STACKTRACE: 22 010808 error
TypeError: ionic_2.ActionSheet.open is not a function
Some tip?
The docs seem to be wrong currently. You need to inject the ActionSheet into your controller like this:
import {ActionSheet} from 'ionic/ionic';
#Page({
templateUrl: 'app/actionSheet/actionSheet.html'
})
export class ActionSheetPage {
constructor(nav:NavController, actionSheet:ActionSheet) {
this.nav = nav;
this.actionSheet = actionSheet;
}
showActionSheet() {
this.actionSheet.open({
...
})
}
}
Also be sure to add this to your index.html (probably after ion-content or ion-tabs)
<ion-overlay></ion-overlay>
in alert.js
import {Page, Alert, ActionSheet, NavController} from 'ionic-angular';
#Page({
templateUrl: 'build/pages/alert/alert.html'
})
export class AlertPage {
static get parameters() {
return [[NavController]];
}
constructor(nav) {
this.nav = nav;
}
showAlert() {
let alert = Alert.create({
title: 'New Friend!',
subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
buttons: ['Ok']
});
this.nav.present(alert);
}
presentActionSheet() {
let actionSheet = ActionSheet.create({
title: 'Modify your album',
buttons: [
{
text: 'Destructive',
style: 'destructive',
handler: () => {
console.log('Destructive clicked');
}
}, {
text: 'Archive',
handler: () => {
console.log('Archive clicked');
}
}, {
text: 'Cancel',
style: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}
]
});
this.nav.present(actionSheet);
}
}
in alert.html
<button block dark (click)="showAlert()">Alert</button>
<button block dark (click)="presentActionSheet()">Action Sheet</button>
Updating answer to match with latest ionic2 changes.
In your actionsheet.html:
<button (click)="showActionSheet()">Show Actionsheet</button>
You will have to import ActionSheetController and Platform from ionic-angular and then inject those into the constructor.
import { ActionSheetController , Platform} from 'ionic-angular';
constructor(
public actionsheetCtrl:ActionSheetController ,
public platform: Platform
) {}
showActionSheet() {
let actionSheet = this.actionsheetCtrl.create({
title: 'Albums',
cssClass: 'action-sheets-basic-page',
buttons: [
{
text: 'Delete',
role: 'destructive',
// icon: !this.platform.is('ios') ? 'trash' : null,
handler: () => {
console.log('Delete clicked');
}
},
{
text: 'Share',
// icon: !this.platform.is('ios') ? 'share' : null,
handler: () => {
console.log('Share clicked');
}
},
{
text: 'Play',
// icon: !this.platform.is('ios') ? 'arrow-dropright-circle' : null,
handler: () => {
console.log('Play clicked');
}
},
{
text: 'Favorite',
// icon: !this.platform.is('ios') ? 'heart-outline' : null,
handler: () => {
console.log('Favorite clicked');
}
},
{
text: 'Cancel',
role: 'cancel', // will always sort to be on the bottom
// icon: !this.platform.is('ios') ? 'close' : null,
handler: () => {
console.log('Cancel clicked');
}
}
]
});
actionSheet.present();
}
Now your actionsheet must be working flawlessly.

Related Links

Attachment action sheet hidden behind keyboard in iOS 9
Use of Actionsheet in Ionic 2
Disable WKActionSheet on WKWebView
Action sheet programatically [closed]
unrecognized selector sent to instance UIActionSheet
Using Viewcontroller to control tabbarController
ShareKit 2.0: how to add a custom NON-SHARE item in action sheet?
Fire UIActionSheet in ViewDidLoad first load only
Setting bounds for UIActionSheet?

Categories

HOME
url-redirection
phantom-dsl
microsoftgraph
facebook-oauth
delphi-7
nvd3.js
jsf-2.2
cq5
hugo
zip
iis-6
jax-ws
fabric.io
categorical-data
ibeacon-android
redis-sentinel
flatpak
screen-readers
package.json
google-data-studio
soci
named-entity-recognition
roslyn
flask-sqlalchemy
pylons
ms-access-web-app
google-earth
xbox
scatter3d
python-2.6
complex-numbers
weather
left-join
fstream
reverse
nohup
node-mssql
smoothstate.js
apollostack
xmldocument
apache-directory
x++
azure-cli
appdomain
gpg-signature
mathcad
sandcastle
reachability
xcode-server
cassia
kango-framework
mediametadataretriever
terracotta
ocra
skspritenode
telepat
mraid
j-security-check
pseudo-class
linkedin-jsapi
xml-namespaces
named-parameters
cuba
file-not-found
away3d
script#
beaker-testing
process-explorer
poker
abstract-data-type
sqlclr
web-notifications
frameworkelementfactory
cgimage
flex-mobile
promotion-code
android-holo-everywhere
creole
quotation-marks
http-daemon
jqueryform
tabpanel
qtabbar
data-mapping
visualj#
sqlobject

Resources

Encrypt Message