All geek questions in one place

Ionic2 close fab menu when a button is pressed

How to close a closed FAB menu when a button is pressed in a menu?

Here is 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 do I need to add to refresh to close the entire FAB? Can I somehow refer to the html object from the code? Similar to how iOS handles its outputs?

+6
source share
2 answers

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 close() method to close the FAB menu (if open) at the beginning of any function called by your FAB buttons, for example:

 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...) }
+9
source

Closing FAB in html file without function .ts; you can use fab.close() in the 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’s so simpler, and you can use several functions for one event (for example, an event (click) ):

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

Do not fake #fab place in tag: <ion-fab #fab>

0
source

Source: https://habr.com/ru/post/1013158/

More articles:


All Articles