Ionic 5/Angular Action Sheet Example With Cordova And Ionic Native 5

Ionic 5/Angular Action Sheet Example with Cordova and Ionic Native 5

In this post we will give you information about Ionic 5/Angular Action Sheet Example with Cordova and Ionic Native 5. Hear we will give you detail about Ionic 5/Angular Action Sheet Example with Cordova and Ionic Native 5And how to use it also give you demo for it if it is necessary.

In this tutorial, we are going to cover how to create and display an Action Sheet with a detailed example using Ionic 5 (Ionic 4) framework.

Action Sheets are used to dispaly a set of buttons and actions for the user to choose from.

Create a New Ionic 5/Angular Project

First create a new Ionic 5 project using the Ionic CLI (I’m using CLI 5). You can also use an existing app:

ionic start ActionSheetExample blank

Next install the ActionSheet Cordova plugin and Ionic Native wrapper:

ionic cordova plugin add --save cordova-plugin-actionsheetnpm install --save @ionic-native/action-sheet

Next, open the src/app/app.module.ts file and add ActionSheet to the list of providers as follows:

import { ActionSheet } from '@ionic-native/action-sheet';@NgModule({declarations: [    MyApp,    HomePage  ],imports: [    BrowserModule,    IonicModule.forRoot(MyApp)],bootstrap: [IonicApp],entryComponents: [    MyApp,    HomePage],providers: [    StatusBar,    SplashScreen,    ActionSheet,    {provide: ErrorHandler, useClass: IonicErrorHandler}]})export class AppModule {}

Next, open the src/pages/home/home.html file and add a button as follows:

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

Next, in the src/pages/home/home.ts file, import and inject ActionSheet as follows:

import { ActionSheet, ActionSheetOptions } from '@ionic-native/action-sheet';export class ActionSheetPage {constructor(private actionSheet: ActionSheet) {}   openActionSheet(){}/* ...*/

Next, implement the openActionSheet() method as follows:

openActionSheet(){    let buttonLabels = ['Button 0', 'Button 1'];    const options: ActionSheetOptions = {        title: 'Action Sheet Title',        subtitle: 'Choose an action',        buttonLabels: buttonLabels,        addCancelButtonWithLabel: 'Cancel',        addDestructiveButtonWithLabel: 'Delete',        destructiveButtonLast: true    };    this.actionSheet.show(options).then((buttonIndex: number) => {        console.log('Button pressed: ' + buttonIndex);    });}

You can then implement the logic of each button on the Promise returned by the this.actionSheet.show(options) method based on the clicked button index.

Now, add a target platform (Android or iOS) and run your app using an emulator or real device:

ionic cordova platform add android ionic run android

Conclusion

We have seen how to use a Cordova plugin to create and show the native ActionSheet UI component in our Ionic 5/Angular app. We can also use Ionic’s own implementation of the Action Sheet, check this tutorial:

Ionic 5/ ActionSheet Component Controller

Hope this code and post will helped you for implement Ionic 5/Angular Action Sheet Example with Cordova and Ionic Native 5. 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