How to hide ion-fab on different tab


#1

Code

<ion-tabs primary>
<ion-tab [root]="family" tabTitle="Family"></ion-tab>
<ion-tab [root]="friends" tabTitle="Friends"></ion-tab>
</ion-tabs>
<ion-fab right bottom>
<button ion-fab color="secondary" (click)="InviteFamily()">
<ion-icon name="add">
</ion-icon>
</button>
</ion-fab>
<ion-fab left bottom>
<button ion-fab color="secondary" (click)="InviteFriends()">
<ion-icon name="add">``</ion-icon>
</button>
</ion-fab>

In above code, how can we hide <ion-fab right bottom> in friends tab and
hide <ion-fab left bottom> in family tab


#2

I’d add a click event to the tabs that sets a boolean to true or false… then add a *ngIf to each fab with the respective boolean result.

E.g. clicking tab1 sets boolean to true and clicking tab2 sets boolean to false. Assume boolean is called fabBoolean… fab1 has *ngIf=“fabBoolean” and fab2 has *ngIf="!fabBoolean".

Set the initial value of the boolean to whatever matches your root tab.

Sorry, I didn’t include a full code example. I’m typing on my phone.