# Pass data into Ionic ActionSheet

**URL:** <https://forum.ionicframework.com/t/pass-data-into-ionic-actionsheet/45864>\
**Category:** ionic-v3\
**Created:** [March 8, 2016, 10:51pm UTC](https://forum.ionicframework.com/t/pass-data-into-ionic-actionsheet/45864 "2016-03-08T22:51:53Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![artfloriani](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/artfloriani/32/144882_2.png) [@artfloriani](https://forum.ionicframework.com/u/artfloriani)\
**Post date:** [March 8, 2016, 10:51pm UTC](https://forum.ionicframework.com/t/pass-data-into-ionic-actionsheet/45864/1 "2016-03-08T22:51:53Z")

</div>

Is there any way to send that into the handler on the Ionic 2 ActionSheet?

I am population an ActionSheet dynamically and I need to send an index or something to know which button am I clicking.

Any thoughts?

Cheers.

---

<div class="post-metadata">

**Author:** ![artfloriani](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/artfloriani/32/144882_2.png) [@artfloriani](https://forum.ionicframework.com/u/artfloriani)\
**Post date:** [March 9, 2016, 7:57pm UTC](https://forum.ionicframework.com/t/pass-data-into-ionic-actionsheet/45864/2 "2016-03-09T19:57:29Z")

</div>

Anyone? I have been struggling with this.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [March 9, 2016, 9:24pm UTC](https://forum.ionicframework.com/t/pass-data-into-ionic-actionsheet/45864/3 "2016-03-09T21:24:57Z")

</div>

So you could pass data along how you normally would.

```auto
constructor(nav: NavController) {
  this.nav = nav;
  this.buttons = //what ever you needed to generate buttons
}

presentActionSheet() {
  let actionSheet = ActionSheet.create({
    title: 'Modify your album',
    buttons: this.buttons // follows the object model of an array of buttons
  this.nav.present(actionSheet);
}

```

---

<div class="post-metadata">

**Author:** ![artfloriani](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/artfloriani/32/144882_2.png) [@artfloriani](https://forum.ionicframework.com/u/artfloriani)\
**Post date:** [March 9, 2016, 9:46pm UTC](https://forum.ionicframework.com/t/pass-data-into-ionic-actionsheet/45864/4 "2016-03-09T21:46:43Z")

</div>

Sorry, I might not have explained it properly:

```auto
for(var i = 0; i < anyarray; i++){
    var button= {
        text: 'button name',
        handler: () => {
             //Get which button was clicked
        }
     }
    actionSheet.addButton(button);
}

```

(sorry about the identation, didn’t manage to make it proper)

How can I get which button was clicked on the handler? I want to get an index or anything that allows me to identify which button is being clicked.

Thanks

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [March 9, 2016, 9:56pm UTC](https://forum.ionicframework.com/t/pass-data-into-ionic-actionsheet/45864/5 "2016-03-09T21:56:18Z")

</div>

Hmm, I’d think you’d be able to pass `i` along in there, right?

```auto
for(var i = 0; i < anyarray; i++){
    var button= {
        text: 'button name',
        handler: (i) => {
             //Get which button was clicked
             console.log(i)
        }
     }
    actionSheet.addButton(button);
}

```

---

<div class="post-metadata">

**Author:** ![artfloriani](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/artfloriani/32/144882_2.png) [@artfloriani](https://forum.ionicframework.com/u/artfloriani)\
**Post date:** [March 9, 2016, 9:59pm UTC](https://forum.ionicframework.com/t/pass-data-into-ionic-actionsheet/45864/6 "2016-03-09T21:59:30Z")

</div>

No, that is my issue. I get `undefined` when trying to access `i`. Probably because the handler is only called when the button is clicked so `i` is already gone by that time. I did not find any way to access the button data. On Ionic 1 there was a way to do it.

Also, if I don’t pass `i` to the handler and try to access it inside the handler, I get the value of the length of the array as the loop will be done when the handler is called.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [March 10, 2016, 8:55pm UTC](https://forum.ionicframework.com/t/pass-data-into-ionic-actionsheet/45864/7 "2016-03-10T20:55:40Z")

</div>

Hmm, now it’s not perfect, but this is pretty close to what you would want.

```auto
export class HomePage {
  constructor(public nav: NavController) {

    this.actionSheet = ActionSheet.create({
      title: 'Modify your album'
    });
    for (let i = 0; i < 5; i++) {
      var button = {
        text: 'button' + i,
        handler: () => {
          console.log(i)
        }
      }
      this.actionSheet.addButton(button)
    }
  }

  presentActionSheet() {
    this.nav.present(this.actionSheet);
  }
}

```

---

<div class="post-metadata">

**Author:** ![artfloriani](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/artfloriani/32/144882_2.png) [@artfloriani](https://forum.ionicframework.com/u/artfloriani)\
**Post date:** [March 10, 2016, 9:22pm UTC](https://forum.ionicframework.com/t/pass-data-into-ionic-actionsheet/45864/8 "2016-03-10T21:22:02Z")

</div>

I tried your code but I only get `5` as the output for all the buttons.

Am I missing something?

---

<div class="post-metadata">

**Author:** ![keczan](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/keczan/32/97039_2.png) [@keczan](https://forum.ionicframework.com/u/keczan)\
**Post date:** [March 10, 2016, 9:45pm UTC](https://forum.ionicframework.com/t/pass-data-into-ionic-actionsheet/45864/9 "2016-03-10T21:45:47Z")

</div>

“i” will always be the last number in the loop since the handler is not called synchronously…I think the way you are using action sheet should be adjusted slightly. Instead of passing data like that, why not set the handler dynamically to a certain function for each button.

Example

```auto
presentActionSheet() {
        let actionSheet = ActionSheet.create({
            title: ' Actions',

        });

        function func1() {

        }

        function func2() {

        }

        let buttonArray = [{
            text: 'Btn 1',
            handler: func1
        },
            {
                text: 'Btn 2',
                handler: func2
            }];

        for (let i = 0; i < buttonArray.length; i++) {
            actionSheet.addButton({
                text: buttonArray[i].text,
                handler: buttonArray[i].handler
            })
        }

        this.nav.present(actionSheet);
    }

```

Apologies for interrupting the conversation.

Additionally, if you would like to stick with the data passing approach, you could always go with the modal or alerts as they have the triggers to pass data to and from easily.

---

<div class="post-metadata">

**Author:** ![artfloriani](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/artfloriani/32/144882_2.png) [@artfloriani](https://forum.ionicframework.com/u/artfloriani)\
**Post date:** [March 10, 2016, 11:30pm UTC](https://forum.ionicframework.com/t/pass-data-into-ionic-actionsheet/45864/10 "2016-03-10T23:30:55Z")

</div>

Hey keczan,

Thank you for your reply. In my case I cannot use your example as I do not know exactly how many buttons I will have. I know that there will be max 3 but I do not want to use your approach as it would be an ugly workaround for my situation. The idea is similar to gmail`s switch account or any app that you can switch between two accounts.

It fits our design to have it in the ActionSheet. Any other suggestions?

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [March 10, 2016, 11:47pm UTC](https://forum.ionicframework.com/t/pass-data-into-ionic-actionsheet/45864/11 "2016-03-10T23:47:30Z")

</div>

> [@artfloriani](#):
>
> I tried your code but I only get 5 as the output for all the buttons.

Are you certain that you used **mhartington** ’s code exactly? Although it might seem like a trivial thing, he’s got `let` defining the loop variable where you had `var`, and that makes all the difference in avoiding a common pitfall with JavaScript scoping.

---

<div class="post-metadata">

**Author:** ![keczan](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/keczan/32/97039_2.png) [@keczan](https://forum.ionicframework.com/u/keczan)\
**Post date:** [March 11, 2016, 12:00am UTC](https://forum.ionicframework.com/t/pass-data-into-ionic-actionsheet/45864/12 "2016-03-11T00:00:58Z")

</div>

my only thought at this point is to extend the action class and override the click function. You can pass through custom data to the button structures as keys. This is where i would start.

ActionSheet class click handler

```auto
click(button, dismissDelay?) {
    let shouldDismiss = true;

    if (button.handler) {

      if (button.handler() === false) { ///Adjust this line.....button.handler(data)

        shouldDismiss = false;
      }
    }

    if (shouldDismiss) {
      setTimeout(() => {
        this.dismiss(button.role);
      }, dismissDelay || this._config.get('pageTransitionDelay'));
    }
  }

```

pass custom properties

```auto
actionSheet.addButton({text:'test', customProp:'prop', handler:(data) => {

})

```

---

<div class="post-metadata">

**Author:** ![artfloriani](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/artfloriani/32/144882_2.png) [@artfloriani](https://forum.ionicframework.com/u/artfloriani)\
**Post date:** [March 15, 2016, 9:37pm UTC](https://forum.ionicframework.com/t/pass-data-into-ionic-actionsheet/45864/13 "2016-03-15T21:37:41Z")

</div>

> [@rapropos](#):
>
> Are you certain that you used mhartington’s code exactly? Although it might seem like a trivial thing, he’s got let defining the loop variable where you had var, and that makes all the difference in avoiding a common pitfall with JavaScript scoping.

Yes, I copied the code exactly as mhartington posted. Still I had the incorrect output.

> [@keczan](#):
>
> my only thought at this point is to extend the action class and override the click function. You can pass through custom data to the button structures as keys. This is where i would start.

I was hoping for something that was already implemented, similar to what is done in Ionic 1. Thanks for your reply, I’ll probably go that way.

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [March 16, 2016, 3:00am UTC](https://forum.ionicframework.com/t/pass-data-into-ionic-actionsheet/45864/14 "2016-03-16T03:00:33Z")

</div>

> [@artfloriani](#):
>
> Yes, I copied the code exactly as mhartington posted. Still I had the incorrect output.

I tried it in a scratch project, and it worked as advertised with numbers 0 through 4, both with the text inside the buttons and the log in the console.

---

<div class="post-metadata">

**Author:** ![artfloriani](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/artfloriani/32/144882_2.png) [@artfloriani](https://forum.ionicframework.com/u/artfloriani)\
**Post date:** [March 16, 2016, 2:13pm UTC](https://forum.ionicframework.com/t/pass-data-into-ionic-actionsheet/45864/15 "2016-03-16T14:13:03Z")

</div>

Might be something with my project. I’ll try again on an scratch project. Thanks for the tip!

When I tested on my project it works for the buttons text but not for the console log. Also, declaring the ActionSheet on the constructor instead of inside the presentActionSheet() method, makes the ActionSheet only clickable once. It might be an issue with my ActionSheet class being a Component and it is being imported on every page.

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [March 16, 2016, 6:43pm UTC](https://forum.ionicframework.com/t/pass-data-into-ionic-actionsheet/45864/16 "2016-03-16T18:43:59Z")

</div>

> [@artfloriani](#):
>
> Also, declaring the ActionSheet on the constructor instead of inside the presentActionSheet() method, makes the ActionSheet only clickable once.

I think I also saw this behavior, FWIW.

---

<div class="post-metadata">

**Author:** ![miguelchavez](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/miguelchavez/32/107790_2.png) [@miguelchavez](https://forum.ionicframework.com/u/miguelchavez)\
**Post date:** [December 23, 2016, 7:35pm UTC](https://forum.ionicframework.com/t/pass-data-into-ionic-actionsheet/45864/17 "2016-12-23T19:35:09Z")

</div>

Did you find a way to do what you want?

---

<div class="post-metadata">

**Author:** ![sufiiiyan](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sufiiiyan/32/107095_2.png) [@sufiiiyan](https://forum.ionicframework.com/u/sufiiiyan)\
**Post date:** [February 22, 2017, 1:44pm UTC](https://forum.ionicframework.com/t/pass-data-into-ionic-actionsheet/45864/18 "2017-02-22T13:44:59Z")

</div>

In my case i am displaying action sheet on image long press to delete, how can i get index of that image in handler?  
or should i try other way or component to achieve this?

---

<div class="post-metadata">

**Author:** ![gadld](https://avatars.discourse-cdn.com/v4/letter/g/c89c15/32.png) [@gadld](https://forum.ionicframework.com/u/gadld)\
**Post date:** [February 23, 2017, 12:29am UTC](https://forum.ionicframework.com/t/pass-data-into-ionic-actionsheet/45864/19 "2017-02-23T00:29:41Z")

</div>

You could do something like this

> actionSheet.addButton({  
> text: title,  
> handler: () =\> {  
> this.function(anyArg);  
> }});

---

<div class="post-metadata">

**Author:** ![turbobasti](https://avatars.discourse-cdn.com/v4/letter/t/848f3c/32.png) [@turbobasti](https://forum.ionicframework.com/u/turbobasti)\
**Post date:** [August 9, 2017, 11:40am UTC](https://forum.ionicframework.com/t/pass-data-into-ionic-actionsheet/45864/21 "2017-08-09T11:40:19Z")

</div>

I think the only thing you can do, to pass the index in the handler is

```auto
for (var i = 0; i < array.length; i++){
	actionSheet.addButton({
		text: title,
		handler: this.myFunction.bind(this, i)
	})
}

myFunction(i){
do something ...
}

```

[Next page](https://forum.ionicframework.com/t/pass-data-into-ionic-actionsheet/45864.md?page=2)