ionic-action-sheet-example
ionic-action-sheet-example
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/

Please login to download the latest source code

To avoid spam user, we only have social login • we do not post anything on your wall


Secured • No Spam

Sundaravel M

About the author: Hi! I'm Sundaravel (codesundar), Founder of codesundar.com. I have been a Web, Mobile App developer, Author, and Teacher since 2014. I also worked as a software consultant for fortune 500 companies. I created codesundar.com to share my real-time knowledge in various technologies such as PhoneGap, Ionic, Flutter and more.