Ionic 2 - Action Sheet Controller Tutorial and Example -- Words (287)

Ionic
Ionic 2/3 Action Sheet controller

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



mrnerd is a Web Entrepreneur & Developer, Digital Marketer and a Passionate Blogger. He writes about software and website development,money making tips and SEO etc.. He is a tech addict and a computer geek with a lot of hobbies.