Ionic close fab menu when button pressed

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?

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



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


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

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){

This should work.


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

@rdanger dude, thats just too basic

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