CODEWITHSUNDEEP
angulartypescriptionic3
user4706117
user4706117

Reputation:

Ionic 3- actionsheet button click event

Please help me to add buttonClick on actionSheet buttons in ionic 3, on click of button items i have to open modal (custom alert).Here is the code: 

    openActionSheet() {
      console.log('opening');
     let actionsheet = this.actionSheetCtrl.create({

     title:"Assign a status to the Request",

     cssClass:'action-sheet-css',
     buttons:[{
     text: 'Collect Documents',
     icon: !this.platform.is('ios') ? 'cog' : null,
      handler: () => {
      }
     },{
     text: 'Reschedule',
      icon: !this.platform.is('ios') ? 'cog' : null,

     handler: function(){
       console.log("reschedule click");
     }
     },{
     text: 'Contact Error',
      icon: !this.platform.is('ios') ? 'cog' : null,
     handler: function(){
     }
     },{
     text: 'Customer Denied',
      icon: !this.platform.is('ios') ? 'cog' : null,
     handler: function(){
     }

    }]

     });
     actionsheet.present();

    }

Upvotes: 0

Views: 5096

Answers (2)

EDISON J
EDISON J

Reputation: 344

Click Actionsheet button open modelcontroller page

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Action Sheet
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="actionSheet()">ActionSheet</button> 
</ion-content>

home.ts

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

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

  constructor(
    public navCtrl: NavController,
    private actionSheetController: ActionSheetController,
    private modelController: ModalController) {

  }
  actionSheet(){
    let actSheet = this.actionSheetController.create({
      title:'Open medel',
      buttons:[
        {
          text:'Archive',
          handler: ()=>{
            this.openModel();
          }
        }
      ]
    });
    actSheet.present();
  }
  openModel(){
    let model = this.modelController.create('ModelPage');
    model.present()
  }

}

We should give a page inside the model controller string this.modelController.create('modelPage')

This code work perfectly.

Upvotes: 1

Sampath
Sampath

Reputation: 65938

You just need to add another button item to above array:

 buttons: [
     {
         text: 'Add',
         handler: () => {
           openModal();
         }
       }
   ]

Then separate method for creating a modal popup:

 openModal(){

 }

Note: Don't use like this handler: function(){} always use flat arrow functions as shown in my example above.

Upvotes: 1

Related Questions