Ionic - Fab List - Click outside to close

Ionic Framework ionic-v3
1

Hello,

Any idea if there’s a directive that we can add to the ion-fab-list to tell it to close when clicked outside? As it stands today, we have to explicitly click on the “x” to close it or if we click on one of the fab-buttons.

Thank you !

1 Like
2

hi, this may help you https://ionicframework.com/docs/v2/api/components/fab/FabContainer/

... <ion-fab bottom right #fab> ...

fab.close();

fab refers to your ion-fab container (#fab) parent of ion-fab-list

1 Like
3

Thanks for that. I was thinking more of an inline directive only, without the use of js/ts.
Something like this:

<ion-fab bottom right auto-close-on-click-outside>
...
</ion-fab>
4

Hi there, i’m facing the same problem how did you solve it??

5

I haven’t yet. Sorry…

6

Hello Guys!

You can use ElementRef to the fab container.

7

Hi,

Can you explain a bit more with a brief example ? Thank you !

8

great help…this is working…

9

In Ionic 4-6:

  1. Add reference variable to your component. <ion-fab #fabComponent></ion-fab>
  2. At ts file, get component reference in the parent component. @ViewChild('fabComponent') fabComponent: IonFab;
  3. Call component method on the reference. this.fabComponent.close();