Ionic close fab menu when button pressed


#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);
}


#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.


#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