ionicActionSheet decorator example

Ionic ionicActionSheet Decorator Example

Here's an example of how to use the ionicActionSheet decorator in Ionic:

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(public actionSheetController: ActionSheetController) {}

  async presentActionSheet() {
    const actionSheet = await this.actionSheetController.create({
      header: 'Options',
      buttons: [
        {
          text: 'Option 1',
          handler: () => {
            console.log('Option 1 clicked');
          }
        },
        {
          text: 'Option 2',
          handler: () => {
            console.log('Option 2 clicked');
          }
        },
        {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    await actionSheet.present();
  }

}

This example demonstrates how to use the ionicActionSheet decorator in an Ionic application. The ionicActionSheet decorator is used to create a customizable action sheet that displays a set of options to the user.

In the example code, the presentActionSheet method is defined to handle the presentation of the action sheet. Inside the method, the ActionSheetController is injected and used to create the action sheet. The create method is called with an object that defines the header and buttons of the action sheet.

Each button is defined as an object with properties such as text (the button label) and handler (a function to be executed when the button is clicked). The role property can be used to specify a special role for a button, such as "cancel" in the example code.

Finally, the present method is called on the action sheet to display it to the user.

This is a basic example of how to use the ionicActionSheet decorator in an Ionic application. You can customize the action sheet further by adding more buttons or modifying the existing ones to suit your needs.