CODEWITHSUNDEEP
uiactionsheetionic2
Asenjo
Asenjo

Reputation: 111

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?

Upvotes: 1

Views: 4026

Answers (3)

CharithW
CharithW

Reputation: 101

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.

Upvotes: 0

Nhan Cao
Nhan Cao

Reputation: 2515

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>

Upvotes: 1

Luke Ehresman
Luke Ehresman

Reputation: 5257

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>

Upvotes: 0

Related Questions