# How to tell which button in fab container was clicked

**URL:** <https://forum.ionicframework.com/t/how-to-tell-which-button-in-fab-container-was-clicked/142398>\
**Category:** ionic-v3\
**Created:** [September 21, 2018, 1:37am UTC](https://forum.ionicframework.com/t/how-to-tell-which-button-in-fab-container-was-clicked/142398 "2018-09-21T01:37:20Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jd314159](https://avatars.discourse-cdn.com/v4/letter/j/a88e4f/32.png) [@jd314159](https://forum.ionicframework.com/u/jd314159)\
**Post date:** [September 21, 2018, 1:37am UTC](https://forum.ionicframework.com/t/how-to-tell-which-button-in-fab-container-was-clicked/142398/1 "2018-09-21T01:37:20Z")

</div>

I have an ionic fab

```auto
<ion-fab (click)="doSomething($event, fab)">

```

and click handler code:

```auto
doSomething(event: any, fab: FabContainer) {
    // what was clicked???
}

```

This will be called if the main fab button is clicked AND if any of the buttons inside the fab list were clicked. How can i tell what was clicked in the “doSomething()” function?

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![Unkn0wn0x](https://avatars.discourse-cdn.com/v4/letter/u/46a35a/32.png) [@Unkn0wn0x](https://forum.ionicframework.com/u/Unkn0wn0x)\
**Post date:** [September 21, 2018, 9:11am UTC](https://forum.ionicframework.com/t/how-to-tell-which-button-in-fab-container-was-clicked/142398/2 "2018-09-21T09:11:39Z")

</div>

If you have a `(click)` listener on your “main” fab button, it will allways trigger the function `doSomething()`.

Do you have the option to set the `(click)` listener on the “child” fab buttons, inside the “main” fab button? If yes, this could be your solution.

Otherwise, if it’s required, to execute allways the `doSomething()` function, you could add it before the function of your “child” button/s.

Something like this:

```auto
<ion-fab>

    <button ion-fab (click)="doSomething(); testOne();">Test One</button>
    <button ion-fab (click)="doSomething(); testTwo();">Test Two</button>
    <button ion-fab (click)="doSomething(); testThree();">Test Three</button>

</ion-fab>

```

- I don’t have the real markup in my mind, just as an example.

The much cleaner solution would be to bind the “main” `<ion-fab>` button in your `.ts`-file and listen to it, which “target”-fab button was clicked or bind the “target”-fab button directly in your `.ts`-file.

Let me know, if it could help you.

Cheers  
Unkn0wn0x

---

<div class="post-metadata">

**Author:** ![jd314159](https://avatars.discourse-cdn.com/v4/letter/j/a88e4f/32.png) [@jd314159](https://forum.ionicframework.com/u/jd314159)\
**Post date:** [September 21, 2018, 11:34pm UTC](https://forum.ionicframework.com/t/how-to-tell-which-button-in-fab-container-was-clicked/142398/3 "2018-09-21T23:34:17Z")

</div>

Thanks for the reply.

I can and do bind a click event to for the sub-fab buttons. The scenario is that i want to do something specific when someone, manually closes the main fab button. The problem is, the click event bound to the main fab button gets fired when any of the sub fab buttons are clicked too.

---

<div class="post-metadata">

**Author:** ![Unkn0wn0x](https://avatars.discourse-cdn.com/v4/letter/u/46a35a/32.png) [@Unkn0wn0x](https://forum.ionicframework.com/u/Unkn0wn0x)\
**Post date:** [September 22, 2018, 8:13am UTC](https://forum.ionicframework.com/t/how-to-tell-which-button-in-fab-container-was-clicked/142398/4 "2018-09-22T08:13:12Z")

</div>

I didn’t tested it (no time, sorry :-)), but it should work, if you use a variable. Try this out:

```auto
<ion-fab (click)="this.fabActive = true; this.fabActive ? doSomethingOnClose() : ''">

    <button ion-fab (click)="this.fabActive = !this.fabActive; doSomething(); testOne();">Test One</button>
    <button ion-fab (click)="this.fabActive = !this.fabActive; doSomething(); testTwo();">Test Two</button>
    <button ion-fab (click)="this.fabActive = !this.fabActive; doSomething(); testThree();">Test Three</button>

</ion-fab>

```

The `doSomethingOnClose()` function should be only triggered, if `this.fabActive` is set to default (true). If you click on a “child” fab button, it will change the value of `fabActive` to false, that should prevent, that the main function will be triggered, except, the user manually closes the “main” fab button.

Let me know it works.

Cheers  
Unkn0wn0x

---

<div class="post-metadata">

**Author:** ![jd314159](https://avatars.discourse-cdn.com/v4/letter/j/a88e4f/32.png) [@jd314159](https://forum.ionicframework.com/u/jd314159)\
**Post date:** [September 23, 2018, 9:40pm UTC](https://forum.ionicframework.com/t/how-to-tell-which-button-in-fab-container-was-clicked/142398/5 "2018-09-23T21:40:07Z")

</div>

Ugh. I really appreciate the help.

It was a good suggestion. The problem i’m seeing is that, when the inner button is clicked, BOTH the inner click and outer fab click are called. Seems odd but that what i’m seeing.

---

<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:** [July 19, 2021, 9:16pm UTC](https://forum.ionicframework.com/t/how-to-tell-which-button-in-fab-container-was-clicked/142398/6 "2021-07-19T21:16:15Z")

</div>

Closed on July 19, 2021, 9:16pm UTC