Action Sheet

The Action Sheet is an Ionic 3 service that will trigger a slide up pane on the bottom of the screen, which you can use for various purposes.

home.html

<ion-header>
  <ion-navbar color="danger">
    <ion-title>
      Jawab Adda
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card>
  <ion-card-header>
    Explore Nearby
  </ion-card-header>

  <ion-list>
    <button ion-item>
       Apple Qty:1 Price: Rs.20/-
       <ion-icon name="arrow-forward" item-end (click)="presentActionSheet()"></ion-icon>
    </button>

    <button ion-item>
      Banner Qty:12 Price: Rs.90/-
      <ion-icon name="arrow-forward" item-end (click)="presentActionSheet()"></ion-icon>
    </button>

    

  </ion-list>
</ion-card>
</ion-content>

home.ts

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

//Action Sheets
import { ActionSheetController } from 'ionic-angular';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController,
  	public actionSheetCtrl: ActionSheetController) {

  }

  //--------------------------------------------
   presentActionSheet() {
    const actionSheet = this.actionSheetCtrl.create({
      title: 'Modify your Product',
      buttons: [
        {
          text: 'Edit',
          handler: () => {
          	alert("Edit")
            console.log('Edit clicked');
          }
        },{
          text: 'Delete',
          handler: () => {
          	alert("Delete")
            console.log('Delete clicked');
          }
        },{
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
          	alert("Cancel")
            console.log('Cancel clicked');
          }
        }
      ]
    });
    actionSheet.present();
  }
  //--------------------------------------------

}