Ionic2 close fab menu when button pressed

6
votes

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? Can I somehow reference the html object from within the code? Similar to the way iOS handles it's outlets?

3
angularionic2floating-action-button

3 Answers

9
votes

Just add #fab to the ion-fab tag:

<ion-fab bottom center #fab>
    <button ion-fab (click)="refresh(fab)"> 
        <ion-icon name="refresh"></ion-icon>       
    </button>
</ion-fab>

and use the FabContainer method close() to close the FAB menu (if opened) at the beginning of any function called by your FAB buttons, e.g.:

import { FabContainer } from 'ionic-angular';

// remember to pass the fab from client side
refresh(fab?: FabContainer): void {
    if (fab !== undefined) {
      fab.close();
    }
    (other function stuff...)
}
0
votes

Closing FAB in html file without .ts function; you can use fab.close() in html tag:

<ion-fab bottom left  #fab>
  <ion-fab-list side="top">
    <button [navPush]="cart" (click)="fab.close()" *ngIf="loggedIn" ion-fab>
  </ion-fab-list>
</ion-fab>

It is so simpler and also You can use multiple function for a single event (for example (click) event):

      <button *ngIf="loggedIn" (click)="logout()" (click)="fab.close()" ion-fab>

Don't forge place #fab in tag: <ion-fab #fab>

0
votes

For new versions working only this solution (I know, i know, timeouts...):

TS:

@ViewChild('fab') _fab: IonFab;

public closeFab(){
    let t = setTimeout(() => {
        this._fabRight.close();
    }, 100);

}

HTML:

<ion-fab vertical="bottom" horizontal="end" #fab>
<ion-fab-button color="secondary">
    <ion-icon name="eye"></ion-icon>
</ion-fab-button>
<ion-fab-list side="start">
    <ion-fab-button (click)="closeFab()">
        <ion-icon name="add"></ion-icon>
    </ion-fab-button>
</ion-fab-list>
</ion-fab>