Ionic 5 Action Sheet Controller Tutorial and Example

Ionic 5 Action Sheet Controller Tutorial and Example

In this post we will give you information about Ionic 5 Action Sheet Controller Tutorial and Example. Hear we will give you detail about Ionic 5 Action Sheet Controller Tutorial and ExampleAnd how to use it also give you demo for it if it is necessary.

In a previous tutorial we have seen how to use Cordova and Ionic Native 5 to create and show the native Action Sheet In Ionic 5. Let’s now see how to display an Ionic 5i mplementation of Action Sheet without using any Cordova plugin.

Create an Ionic 5/Angular Project

Start by creating a new Ionic 5 project using the Ionic CLI 5:

ionic start ActionSheetControllerExample blank 

You can also use an existing project.

Trigger the Action Sheet

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

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

Next, open src/pages/home/home.ts and add the following code:

Import and Inject ActionSheetController as follows:

import { ActionSheetController } from '@ionic/angular';@Component({selector: 'home',templateUrl: 'home.html',})export class HomePage {constructor(public actionSheetCtrl: ActionSheetController) {}    

Next, add the openActionSheetController() method as follows:

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.

Next, we use the present() method of the 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 in our Ionic 5/Angular project.

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

Hope this code and post will helped you for implement Ionic 5 Action Sheet Controller Tutorial and Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US