Use of Actionsheet in Ionic 2

Question

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?

Answer 1

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>