Ionic 2 - Action Sheet Controller Tutorial and Example


In a previous tutorial we have seen how to use Cordova and Ionic Native 3.x+ to create and show the native Action Sheet In Ionic 2 .Lets now see how to display an Ionic implementation of Action Sheet without using any Cordova plugin .

Required Steps

Start by creating a new Ionic 2 project using the Ionic CLI v3 .

ionic start ActionSheetControllerExample blank 

You can also use an existing project .

Next open src/pages/home/home and add a button to trigger the Action Sheet component .

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

Then open src/pages/home/home.ts

Import and Inject ActionSheetController

import { ActionSheetController } from 'ionic-angular';

selector: 'home',
templateUrl: 'home.html',
export class HomePage {

constructor(public actionSheetCtrl: ActionSheetController) {


Then add openActionSheetController()

    let actionSheet = this.actionSheetCtrl.create({
    title: 'Action Sheet Title',
    buttons: [{
        text: 'Hide',
        handler: () => {
            let navTransition = actionSheet.dismiss();
            return false;


So first we create the actionSheet object with the required options such as the title and buttons

Each button has its own title and the handler which gets executed when the button is clicked .

Then we use present() method of actionSheet object to dispaly the Action Sheet to the user .


We have covered how to use the Action Sheet component Controller to use and dispaly an Action Sheet with a set of custom buttons .

You can also see this tutorial for how to display native action sheet using Cordova and Ionic Native

Note: We also publish our tutorials on Medium and If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub

Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.

comments powered by Disqus Protection Status