An Overview On Ionic Action Sheet In Angular(ion-action-sheet)

Ionic Action Sheet is a dialog that contains a collection of actionable buttons that display over the application. Here we are going to understand Ionic Action Sheet implementation in Angular.

ActionSheetController And ActionSheetOptions:

The main building blogs for developing Ionic Action Sheet can be like

• ActionSheetController
• ActionSheetOptions

ActionSheetController is imported from the package '@ionic/angular'. ActionSheetController is injectable controller into our any of the ionic angular component through constructor injection. An ActinSheetController can create an n-number of action sheets within the components. ActionSheetController bundled with three main methods like

• create
• dismiss
• getTop

create method helps to instantiate or build the Ionic Action Sheet by taking ActionSheetOptions as input configuration.

Ionic Angular create(action sheet create method) syntax:

create(opts?: Opts): Promise<Overlay>;

dismiss method helps to destroy the action sheet, it takes 'data'(of type any) and 'id'(id of the action sheet as an input parameter) and returns boolean of value promise. On invoking dismiss without passing an 'id'(action sheet id) then the topmost opened action sheet gets closed. If we pass 'id' property that identifies a specific action sheet and closes it.

Ionic Angular dismiss(action sheet dismiss method) syntax:

dismiss(data?: any, role?: string, id?: string): Promise<boolean>;

getTop method helps to return the top-level action sheet overlay on subscribing to this promise. In general words, it returns DOM information of the top-level action sheet.

Ionic Angular getTop(action sheet getTop method) syntax:

getTop(): Promise<Overlay>;

ActionSheetOptions are configurable options to build up the ionic action sheet. ActionSheetOptions included in the package of '@ionic/core'.

action-sheet-interface.d.ts:(ActionSheetOptions Interface Type)

export interface ActionSheetOptions {
    header?: string;
    subHeader?: string;
    cssClass?: string | string[];
    buttons: (ActionSheetButton | string)[];
    backdropDismiss?: boolean;
    translucent?: boolean;
    animated?: boolean;
    mode?: Mode;
    keyboardClose?: boolean;
    id?: string;
    enterAnimation?: AnimationBuilder;
    leaveAnimation?: AnimationBuilder;
}

• #L2 at this line 'header' property to define the ionic action sheet header.
• #L3 at this line 'subHeader' property to define the ionic action sheet subheader.
• #L4 at this line 'cssClass' property to define the custom CSS class to override the styles of an action sheet.
• #L5 at this line 'buttons' property to define the collection of an actionable button on the action sheet. It is also one and only mandatory property that need to define on configuring ActionSheetOptions
• #L6 at this line 'backdropDismiss' property of boolean which defined to close the action sheet on clicking backdrop, by default it was set 'true'
• #L7 at this line 'translucent' property for semi-transparent display this option is specifically for ios devices.
• #L8 at this line 'animated' property for enabling animation for the action sheet.
• #L9 at this line 'mode' property for determining the device to apply the platform-specific style to the action sheet.
• #L10 at this line 'keyboadCloase' property of boolean value to close the action sheet by keyboard buttons.
• #L11 at this line 'id' property defined to identify the action sheet.

Create Sample Ionic Application:

Let's create an ionic sample application, to better understand the ionic action sheet controller implementation.

Command To Create Ionic App:

ionic start your_project_name tabs

Command To Start Ionic App:

ionic serve

Create And Present ActionSheetController:

The create method of action sheet controller creates a new instance and the present method is to display that instance.

Let's implement a sample action sheet as follows.

src/app/tab1/tab1.page.ts:

import { Component } from "@angular/core";
import { ActionSheetController } from "@ionic/angular";

@Component({
  selector: "app-tab1",
  templateUrl: "tab1.page.html",
  styleUrls: ["tab1.page.scss"],
})
export class Tab1Page {
  constructor(private actionSheetController: ActionSheetController) {}

  async showMyActionSheet(){
    
    const actionSheet = await this.actionSheetController.create({
      buttons:[]
    });

    await actionSheet.present();
  }
  
}

• #L2 at this line 'ActionSheetController' is imported from '@ionic/angular' package.
• #L10 at this line 'ActionSheetController' is injected into the 'Tab1page' component constructor.
• #L12-L19 at these lines defined a method 'showActionSheet' which contains all logic of creating an instance of an action sheet and presenting it.
• #L14 at this line action sheet controller the create method invoked to create an instance of the action sheet controller.
• #L14-L16 at these lines we can observe configuration of action sheet, these configurations are of type 'ActionSheetOptions'. Only buttons property is mandatory for the 'ActionSheetOptions', for now, buttons property assigned with an empty array.
• #L18 at this line action sheet instance calls the method 'present' that will display or render the action sheet to the UI.

Now let's add the ionic button on clicking it we need to invoke this 'showActionSheet()' method. 

src/app/tab1/tab1.page.html:

<ion-button expand="block" (click)="showMyActionSheet()">Open Action Sheet</ion-button>

Let's run the application and output as shown below.

Now click on the button on the page, we can see a black shaded overlay and no action sheet because till now we haven't configured any action sheet buttons.

header And subHeader Options:

Let's add a header and subHeader ActionSheetOptions as follows.

src/app/tab1/tab1.page.ts:

async showMyActionSheet(){
    
    const actionSheet = await this.actionSheetController.create({
      buttons:[],
      header:"Hello I'm Header",
      subHeader:"I'm SubHeader"
    });

    await actionSheet.present();
  }

• #L5 at this line header option configured.
• #L6 at this line subHeader option configured.

Now let's run the application and click on the button and action sheet displays as below.

Configure Action Buttons:

In ActionSheetOptions, button property takes an array of buttons of type 'ActionSheetButtons'. Buttons are the core configuration for the ionic action sheet. Each button has its own responsibilities like confirmation, actions, etc.

ActionSheetButton(Interface Type):

export interface ActionSheetButton {
    text?: string;
    role?: 'cancel' | 'destructive' | 'selected' | string;
    icon?: string;
    cssClass?: string | string[];
    handler?: () => boolean | void | Promise<boolean | void>;
}

• #L2 at this line 'text' property represents the name for the button.
• #L3 at this line 'role' property represents button role like 'cancel', 'destructive', 'selected' are default role types for the button.
• #L4 at this line 'icon' property to display the icon for the button.
• #L5 at this line 'cssClass' property to add custom CSS classes to modify the button style.
• #L6 at this line 'handler' is call back function that gets invoked on clicking the button.

Let's configure a few sample buttons below.

src/app/tab1/tab1.page.ts:

const actionSheet = await this.actionSheetController.create({
  buttons:[{
	text:'Click Me1',
	role:'',
	cssClass:'',
	handler:()=>{},
	icon:''
  },{
	text:'Click Me2',
	role:'',
	cssClass:'',
	handler:()=>{},
	icon:''
  }],
  header:"Hello I'm Header"
});

Now run the application and open action sheet and output shows as below.

Cancel Role Of Action Button:

As we know we can assign a role for the action button like 'cancel', 'destructive', 'selected'. The array of buttons in the ActionSheetOptions are displayed from top to bottom of array order, but if we assign the role of the button to 'cancel' then the button will show the bottom of the action sheet buttons. So if a button having a role to 'cancel' no matter of position it was declared in the array, it always gets rendered at the bottom of the action sheet.

Let's add the buttons with cancel role as below
src/app/tab1/tab1.page.ts:

const actionSheet = await this.actionSheetController.create({
  buttons:[{
	text:'Click Me1- I have role',
	role:'cancel',
	cssClass:'',
	handler:()=>{},
	icon:''
  },{
	text:'Click Me2',
	role:'',
	cssClass:'',
	handler:()=>{},
	icon:''
  },
  {
	text:'Click Me3',
	role:'',
	cssClass:'',
	handler:()=>{},
	icon:''
  }],
  header:"Hello I'm Header"
});

Here we can observe for the first button we have given the role 'cancel', on rendering this button will be displayed bottom of the action sheet.

Let's run the application and observe the order of the button below.

Handlers Of Action Button:

The handler is a callback function or anonymous method of a button that is executed on clicking the action button. Here in this function, we can implement the logic for the button, for example, calling API. This handler method returns types like a void, boolean, promise.

src/app/tab1/tab1.page.ts:

const actionSheet = await this.actionSheetController.create({
  buttons:[{
	text:'Click Me',
	role:'',
	cssClass:'',
	handler:()=>{
	  console.log("Hello i'm action button handler");
	},
	icon:''
  }],
  header:"Hello I'm Header"
});

#L7 at this line written console log to test on clicking action button handler method invoking or not.

Now let's run the application and click on the action button and then check the browser console which shows the output as below.

If you observe carefully after clicking on the action button the ionic action sheet gets closed immediately. The reason because if the handler method of button return type either 'void' or 'true' then the action sheet gets closed after execution of the handler method. So if you want to avoid closing the action sheet then we need to return 'false' value as return type.

So let's test the avoiding closing of the action sheet by updating the handler code as below.

src/app/tab1/tab1.page.ts:

const actionSheet = await this.actionSheetController.create({
  buttons:[{
	text:'Click Me',
	role:'',
	cssClass:'',
	handler:()=>{
	  return false;
	},
	icon:''
  }],
  header:"Hello I'm Header"
});

#L7 at this line we returning 'false' as an output of the handler to test avoiding closing of action sheet.

Now run the application and click on the action button we can observe that the action sheet will not close now.

backdropDismiss Property:

By default on clicking backdrop overlay, the action sheet gets closed. So to avoid closing of action sheet on clicking backdrop can be achieved by setting backdropDismiss property to 'false'.

src/app/tab1/tab1.page.ts:

const actionSheet = await this.actionSheetController.create({
  buttons:[{
	text:'Click Me',
	role:'',
	cssClass:'',
	handler:()=>{
	},
	icon:''
  }],
  backdropDismiss:false,
  header:"Hello I'm Header"
});

#L10 at this line 'backdropDismiss' property set to false to avoid closing of action sheet on clicking backdrop overlay.

onWillDismiss And on DidDismiss methods:

onWillDismiss and onDidDismiss methods of action sheet controller are callback methods of type promise. 

onWillDismiss method will get invoked before the closing of an action sheet.

onDidDismiss method will get invoke immediately after the closing of an action sheet.

Let's test onWillDismiss and on DidDismiss method by implementing them as below

src/app/tab1/tab1.page.ts:

async showMyActionSheet(){
    
    const actionSheet = await this.actionSheetController.create({
      buttons:[{
        text:'Click Me',
        role:'cancel',
        cssClass:'',
        handler:()=>{
          console.log("handler executed")
        },
        icon:''
      }],
      header:"Hello I'm Header"
    });

    await actionSheet.present();

    actionSheet.onWillDismiss().then((value) => {
      console.log("on will dismiss : -");
      console.log(value);
      debugger;
    });

    actionSheet.onDidDismiss().then((value) => {
      console.log("on did dismiss : -");
      console.log(value)
      debugger;
    })
  }

• #L18-L22 at these lines registered the onWillDismiss method which gets executed before the closing of the ionic action sheet.
• #L24-28 at these lines registered the onDidDismiss method which gets executed after-action sheet closed.

Now let's run the application and click on backdrop overlay to close action sheet then output shows below.

now click continue on above debugger then onDidDismiss method gets invoked and output shows below.

Wrapping Up:

Hopefully, I think this article delivered some useful information about the ionic action sheet in angular. I love to have your feedback, suggestions, and better techniques in the comment section below.

Follow Me:

Facebook

Twitter

Pinterest