Use ActionSheet to update button icon & text in Ionic 2

Ionic Framework ionic-v3
1

I’m struggling to figure out how to use an ActionSheet to update the value and icon of a button in Ionic 2. Below is snippets of my code - I have been trying to put something together in CodePen however I have failed miserably to successfully replicate an Ionic 2 project.

The label and button look like the below image. The default value of the button is “Forward” and the default icon is “arrow-round-forward”.

image

The goal is that the user will click the button and be presented with an ActionSheet which allows them to select either “Forward”, “Reverse” or “Cancel”.

image

I have the ActionSheet working fine, however I can’t work out how do the following:

  • Set the default icon and text of the button on page load

  • Change the icon and text of the button on ActionSheet option select

HTML:

image
Pasted image840×112 5.04 KB

Typescript:

image
Pasted image812×579 15.3 KB

Does anyone have any experience doing what I am trying to do?

2

First of all, here’s a plunkr for Ionic 2 in case you need to recreate any portion of your project and demonstrate the issue: http://plnkr.co/edit/me3Uk0GKWVRhZWU0usad?p=preview

I’m not so sure what you’re trying to do. I understand that you want to programmatically change the options available in the action sheet?

You can do something like this:

    let actionSheetButtons = [];
    
    if(someConditionMet){
      actionSheetButtons.push({
        text: 'Forward',
        icon: 'arrow-round-forward',
        handler: () => {}
      });
    } else {
      actionSheetButtons.push({
        text: 'Reverse',
        icon: 'arrow-round-back',
        handler: () => {}
      });
    }
    
    actionSheetButtons.push({
      text: 'Cancel',
      role: 'cancel',
      handler: () => {}
    });
    
    let actionSheet = this.actionSheetCtrl.create({
      title: 'Screen Orientation',
      buttons: actionSheetButtons
    });
    
    actionSheet.present();
3

Thanks for the Plunker link.

What I’m trying to do is to programmatically change the icon and text of the button that triggered the opening of the ActionSheet, i.e. the button defined in my HTML above. Is this possible?

4

You want to change it instantly without dismissing the action sheet?

5

Not necessarily - happy for it to be changed once the ActionSheet has been dismissed (I would expect the ActionSHeet will be dismissed/closed upon option selection).

6

If you need to do it when it’s dismissed then you can use the code I shared above and just change the boolean value in the handler.

7

Sorry I’m not sure I understand. What is the best way to reference the button from within the handler? I assumed it would be something like:

handler: () => {
  this.OrientationButton.icon= "arrow-round-forward"
  this.OrientationButton.value = "Forward"
  console.log('Forward clicked');
}

In the above code example, I am using “OrientationButton” as the identifier for the button the user clicks in order to trigger the opening of the ActionSheet.