Ionic 2 Actionsheet

Ionic Framework ionic-v3
1

Hello,

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 :

<ion-content padding class="getting-started">

    <button (click)="showActionSheet()">Show Actionsheet</button>

</ion-content>

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?

Thanks in advantage

2

Not sure but you may have to instantiate the ActionSheet in your constructor?

3

I am not sure how to do that, could you throw some of light on it?

4

Try:

export class ActionSheetPage {
constructor(nav: NavController,actionSheet:ActionSheet) {
this.nav = nav;
this.actionSheet = actionSheet;
}

and then this.actionsSheet.open()

5

Thanks so much Richard, now it is working properly

1 Like