Skip to main content

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:

Comments

  1. Hi, first thanks for this tutorial. I have ion-card with action sheet menu and when I click, using mobile, on back button return to previous page and the menu still opened. Do you know how to enable to close menu when click on back button?

    ReplyDelete
    Replies
    1. Hi,
      Try to use backbutton event from platform library, inject the libraray into constructor
      import { Platform } from 'ionic-angular'; //import platform

      constructor(private platform:Platform)

      this.platform.registerBackButtonAction(() => {
      this.actionSheet.dismiss() // write dismiss method of action sheet
      });

      i hope this will resolve your issue
      Thanks

      Delete

Post a Comment

Popular posts from this blog

Angular 14 Reactive Forms Example

In this article, we will explore the Angular(14) reactive forms with an example. Reactive Forms: Angular reactive forms support model-driven techniques to handle the form's input values. The reactive forms state is immutable, any form filed change creates a new state for the form. Reactive forms are built around observable streams, where form inputs and values are provided as streams of input values, which can be accessed synchronously. Some key notations that involve in reactive forms are like: FormControl - each input element in the form is 'FormControl'. The 'FormControl' tracks the value and validation status of form fields. FormGroup - Track the value and validate the state of the group of 'FormControl'. FormBuilder - Angular service which can be used to create the 'FormGroup' or FormControl instance quickly. Form Array - That can hold infinite form control, this helps to create dynamic forms. Create An Angular(14) Application: Let'

.NET 7 Web API CRUD Using Entity Framework Core

In this article, we are going to implement a sample .NET 7 Web API CRUD using the Entity Framework Core. Web API: Web API is a framework for building HTTP services that can be accessed from any client like browser, mobile devices, and desktop apps. In simple terminology API(Application Programming Interface) means an interface module that contains programming functions that can be requested via HTTP calls either to fetch or update data for their respective clients. Some of the Key Characteristics of API: Supports HTTP verbs like 'GET', 'POST', 'PUT', 'DELETE', etc. Supports default responses like 'XML' and 'JSON'. Also can define custom responses. Supports self-hosting or individual hosting, so that all different kinds of apps can consume it. Authentication and Authorization are easy to implement. The ideal platform to build the REST full services. Install The SQL Server And SQL Management Studio: Let's install the SQL server on our l

.NET6 Web API CRUD Operation With Entity Framework Core

In this article, we are going to do a small demo on AspNetCore 6 Web API CRUD operations. What Is Web API: Web API is a framework for building HTTP services that can be accessed from any client like browser, mobile devices, desktop apps. In simple terminology API(Application Programming Interface) means an interface module that contains a programming function that can be requested via HTTP calls to save or fetch the data for their respective clients. Some of the key characteristics of API: Supports HTTP verbs like 'GET', 'POST', 'PUT', 'DELETE', etc. Supports default responses like 'XML' and 'JSON'. Also can define custom responses. Supports self-hosting or individual hosting, so that all different kinds of apps can consume it. Authentication and Authorization are easy to implement. The ideal platform to build REST full services. Create A .NET6 Web API Application: Let's create a .Net6 Web API sample application to accomplish our

ReactJS(v18) JWT Authentication Using HTTP Only Cookie

In this article, we will implement the ReactJS application authentication using the HTTP-only cookie. HTTP Only Cookie: In a SPA(Single Page Application) Authentication JWT token either can be stored in browser 'LocalStorage' or in 'Cookie'. Storing the JWT token inside of the cookie then the cookie should be HTTP Only. The HTTP-ONly cookie nature is that it will be only accessible by the server application. Client apps like javascript-based apps can't access the HTTP-Only cookie. So if we use the authentication with HTTP-only JWT cookie then we no need to implement the custom logic like adding authorization header or storing token data, etc at our client application. Because once the user authenticated cookie will be automatically sent to the server by the browser on every API call. Authentication API: To authenticate our client application with JWT HTTP-only cookie, I developed a NetJS(which is a node) Mock API. Check the GitHub link and read the document on G

Angular 14 State Management CRUD Example With NgRx(14)

In this article, we are going to implement the Angular(14) state management CRUD example with NgRx(14) NgRx Store For State Management: In an angular application to share consistent data between multiple components, we use NgRx state management. Using NgRx state helps to avoid unwanted API calls, easy to maintain consistent data, etc. The main building blocks for the NgRx store are: Actions - NgRx actions represents event to trigger the reducers to save the data into the stores. Reducer - Reducer's pure function, which is used to create a new state on data change. Store - The store is the model or entity that holds the data. Selector - Selector to fetch the slices of data from the store to angular components. Effects - Effects deals with external network calls like API. The effect gets executed based the action performed Ngrx State Management flow: The angular component needs data for binding.  So angular component calls an action that is responsible for invoking the API call.  Aft

Unit Testing Asp.NetCore Web API Using xUnit[.NET6]

In this article, we are going to write test cases to an Asp.NetCore Web API(.NET6) application using the xUnit. xUnit For .NET: The xUnit for .Net is a free, open-source, community-focused unit testing tool for .NET applications. By default .Net also provides a xUnit project template to implement test cases. Unit test cases build upon the 'AAA' formula that means 'Arrange', 'Act' and 'Assert' Arrange - Declaring variables, objects, instantiating mocks, etc. Act - Calling or invoking the method that needs to be tested. Assert - The assert ensures that code behaves as expected means yielding expected output. Create An API And Unit Test Projects: Let's create a .Net6 Web API and xUnit sample applications to accomplish our demo. We can use either Visual Studio 2022 or Visual Studio Code(using .NET CLI commands) to create any.Net6 application. For this demo, I'm using the 'Visual Studio Code'(using the .NET CLI command) editor. Create a fo

Part-1 Angular JWT Authentication Using HTTP Only Cookie[Angular V13]

In this article, we are going to implement a sample angular application authentication using HTTP only cookie that contains a JWT token. HTTP Only JWT Cookie: In a SPA(Single Page Application) Authentication JWT token either can be stored in browser 'LocalStorage' or in 'Cookie'. Storing JWT token inside of the cookie then the cookie should be HTTP Only. The HTTP-Only cookie nature is that it will be only accessible by the server application. Client apps like javascript-based apps can't access the HTTP-Only cookie. So if we use authentication with HTTP only JWT cookie then we no need to implement custom logic like adding authorization header or storing token data, etc at our client application. Because once the user authenticated cookie will be automatically sent to the server by the browser on every API call. Authentication API: To implement JWT cookie authentication we need to set up an API. For that, I had created a mock authentication API(Using the NestJS Se

Angular 14 Crud Example

In this article, we will implement CRUD operation in the Angular 14 application. Angular: Angular is a framework that can be used to build a single-page application. Angular applications are built with components that make our code simple and clean. Angular components compose of 3 files like TypeScript File(*.ts), Html File(*.html), CSS File(*.cs) Components typescript file and HTML file support 2-way binding which means data flow is bi-directional Component typescript file listens for all HTML events from the HTML file. Create Angular(14) Application: Let's create an Angular(14) application to begin our sample. Make sure to install the Angular CLI tool into our local machine because it provides easy CLI commands to play with the angular application. Command To Install Angular CLI npm install -g @angular/cli Run the below command to create the angular application. Command To Create Angular Application ng new name_of_your_app Note: While creating the app, you will see a noti

ReactJS(v18) Authentication With JWT AccessToken And Refresh Token

In this article, we are going to do ReactJS(v18) application authentication using the JWT Access Token and Refresh Token. JSON Web Token(JWT): JSON Web Token is a digitally signed and secured token for user validation. The JWT is constructed with 3 important parts: Header Payload Signature Create ReactJS Application: Let's create a ReactJS application to accomplish our demo. npx create-react-app name-of-your-app Configure React Bootstrap Library: Let's install the React Bootstrap library npm install react-bootstrap bootstrap Now add the bootstrap CSS reference in 'index.js'. src/index.js: import 'bootstrap/dist/css/bootstrap.min.css' Create A React Component 'Layout': Let's add a React component like 'Layout' in 'components/shared' folders(new folders). src/components/shared/Layout.js: import Navbar from "react-bootstrap/Navbar"; import { Container } from "react-bootstrap"; import Nav from "react-boot

A Small Guide On NestJS Queues

NestJS Application Queues helps to deal with application scaling and performance challenges. When To Use Queues?: API request that mostly involves in time taking operations like CPU bound operation, doing them synchronously which will result in thread blocking. So to avoid these issues, it is an appropriate way to make the CPU-bound operation separate background job.  In nestjs one of the best solutions for these kinds of tasks is to implement the Queues. For queueing mechanism in the nestjs application most recommended library is '@nestjs/bull'(Bull is nodejs queue library). The 'Bull' depends on Redis cache for data storage like a job. So in this queueing technique, we will create services like 'Producer' and 'Consumer'. The 'Producer' is used to push our jobs into the Redis stores. The consumer will read those jobs(eg: CPU Bound Operations) and process them. So by using this queues technique user requests processed very fastly because actually