[Ionic] Components Action Sheets

action-sheet.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Action Sheet Page</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button block (click)="presentActionSheet()">
    Show Action Sheet
  </button>
</ion-content>

action-sheet.ts

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

@Component({
    templateUrl: 'action-sheet.html'
})
export class ActionSheetPage {
    constructor(public actionSheetCtrl: ActionSheetController) {
    
    }

    presentActionSheet() {
        let actionSheet = this.actionSheetCtrl.create({
            title: 'action sheet demo',
            buttons: [
                {
                    text: 'Delete',
                    role: 'destructive',
                    handler: () => {

                    }
                },
                {
                    text: 'button',
                    handler: () => {

                    }
                },
                {
                    text: 'cancel',
                    role: 'cancel',
                    handler: () => {
                        
                    }
                }
            ]
        });
        actionSheet.present();
    }
}