Ionic close fab menu when button pressed

Ionic Framework ionic-v3
1

How can I close the open FAB menu when a button in the menu was pressed?

Here’s my button.

<ion-fab bottom center > <button ion-fab><b>Hello</b></button> <ion-fab-list side="top"> <button ion-fab (click)="refresh()"><ion-icon name="refresh"></ion-icon></button>

What would I have to add to refresh to make the whole FAB close?

2

Bump! Need this as well…nothing in the interwebs is answering this question…

3

found:

[http://ionicframework.com/docs/v2/api/components/fab/FabContainer/]

share(socialNet: string, fab: FabContainer) {
fab.close();
console.log(“Sharing in”, socialNet);
}

5 Likes
4

yeah, found it too, forgot to post solution. it’s quite well hidden

5

Found the solution why fab button unable to close (which I got an error)

You need to put #fab inside <ion-fab> if you want to use fab.close()

Example at html:

<ion-fab bottom center #fab> 
<button ion-fab><b>Hello</b></button>
<ion-fab-list side="top">
<button ion-fab (click)="closeFab(fab)"><ion-icon name="close"></ion-icon></button>

Then at .ts file:

closeFab(fab: FabContainer){
     fab.close();
}

This should work.

7 Likes
6

is there a way to make a FAB take you to a new page? or to pop up a dialog?

7

@rdanger dude, thats just too basic

8

yes, that’s correct. and its work for me

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();
1 Like