How to tell which button in fab container was clicked

Ionic Framework ionic-v3
1

I have an ionic fab

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

and click handler code:

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.

2

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:

<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

3

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.

4

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

<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

5

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.