Ionic 4/5 Action Sheet | Angular Tutorial

In this tutorial, we will implement the Action Sheet menu in the Ionic 5 application. The action sheet menu is open by sliding up from the bottom of the view.

Action sheet menu is added to provide some action controls to the user which pops up and gets visible which takes no space on view at normal.

In the home.page.html just add a button or link on click of which you want to show the action sheet buttons:

Now in the home.page.ts class file import ActionSheetController and add in the constructor to use its create() method.

Add the presentActionSheet() method to call create() which tales header property to label action sheet buttons.

The second property is the buttons taking objects each to show an action control with properties text, role, icon ,cssClass and handler which is called on tap.

 

 

Leave a Reply

avatar
  Subscribe  
Notify of