Checkout MyThemeBox.com for Ionic & Flutter Themes

Ionic Action Sheet

ionic-action-sheet-example

This Article I'm going to explain, How to create ActionSheet using Ionic Framework.

Goal:

  • Create a button
  • When user pressed button, open action sheet with 2 option

    • Option 1: Access Camera
    • Option 2: Access Gallery
  • Display Output in console

STEPS

Create New Ionic 2 Project

ionic start ActionSheet blank

Create a button with click functionality inside src/home.html

<button ion-button (click)="openActionSheet()" class="button">Open Action Sheet</button>

Open src/home.ts

import { Component } from '@angular/core';
import { ActionSheetController } from 'ionic-angular'
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public actionSheetCtrl: ActionSheetController) {
  
  }
openActionSheet(){
  console.log('opening');
  let actionsheet = this.actionSheetCtrl.create({
  title:"Choose Album",
  buttons:[{
  text: 'Camera',
  handler: () => {
  console.log("Camera Clicked");
  }
  },{
  text: 'Gallery',
  handler: function(){
  console.log("Gallery Clicked");
  }
  }]
  });
  actionsheet.present();
}
}

Explanation:

Step 1: You need to import action sheet from ionic-angular

actionSheetCtrl.create() used for creating action sheet, you can pass options like title, button label, a callback function and more.  actionsheet.present() used for opening action sheet.

Learn More: http://ionicframework.com/docs/v2/api/components/action-sheet/ActionSheetController/