Ionic 2 - Action Sheet Controller Tutorial and Example

Introduction


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';

@Component({
selector: 'home',
templateUrl: 'home.html',
})
export class HomePage {

constructor(public actionSheetCtrl: ActionSheetController) {

}    

Then add openActionSheetController()

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

    actionSheet.present();    
}

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 .

Conclusion


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 DEV.to. 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.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status