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


  • 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


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'
 selector: 'page-home',
 templateUrl: 'home.html'
export class HomePage {
  constructor(public actionSheetCtrl: ActionSheetController) {
 let actionsheet = this.actionSheetCtrl.create({
 title:"Choose Album",
 text: 'Camera',
 handler: () => {
 console.log("Camera Clicked");
 text: 'Gallery',
 handler: function(){
 console.log("Gallery Clicked");


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:

Please login to download source code Login Here
Sundaravel M

About the author: Hey! It's me sundar. (Yea, I'm the founder of I'm a passionate computer programmer who loves modern web and mobile development. feel free to reach me : Facebook - Twitter - YouTube