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 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 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 to share my real-time knowledge in various technologies such as PhoneGap, Ionic, Flutter and more.