Is there a way to read Ion-Segment values to pass them to an Ion-Fab to run different functions depending on the SwitchCase?

Question

I currently have an Ion-Segment with two switchCases. That is Management & Market. However I want to include a FAB button to run different functions depending on what SwitchCase the user is at.

Ive already tried placing the FAB in the SwitchCase Options,however the FAB seems to be scrolling on with the page instead of sticking.

The fab should run different functions for the different switch cases.

//CODE FOR THE SEGMENT

    <ion-header>
        <ion-segment [(ngModel)]="options" color="grey">
            <ion-segment-button value="Management">
                Management
            </ion-segment-button>
            <ion-segment-button value="Market">
                Crop Market
            </ion-segment-button>
        </ion-segment>
    </ion-header>

//CODE FOR IMPLEMENTATION OF THE SEGMENT

    <ion-content>
    <div [ngSwitch]="options" class="management-class"> //FIRST SWITCH CASE
    <div *ngSwitchCase="'Management'">
    <//MANAGEMENT CONTENT FOR THIS SWITCH CASE>
    </div>
    </div>

    <div [ngSwitch]="options" class="management-class">//SECOND SWITCH CASE
    <div *ngSwitchCase="'Market'">
    <//MARKET CONTENT FOR THIS SWITCH CASE>
    </div>
    </div>

    //This is the ion-fab button to that switches functions based on the users current switch case.

    <ion-fab right bottom>
        <button *ngIf="this.options=Market" ion-fab (click)="addToMarket()" color="primary" mini><img src="assets/imgs/add1.png"></button>
        <button *ngIf="this.options=Management" ion-fab (click)="plantNew()" color="primary" mini><img src="assets/imgs/add1.png"></button>
    </ion-fab>

</ion-content>

Answer 1

Use ionChange event on your segment like:

<ion-segment (ionChange)="segmentChanged($event)">
    <ion-segment-button value="friends">
      <ion-label>Friends</ion-label>
    </ion-segment-button>
    <ion-segment-button value="enemies">
      <ion-label>Enemies</ion-label>
    </ion-segment-button>
  </ion-segment>

in your component.ts

segmentChanged(e){
    console.log(e.detail.value)
    this.segmentValue = e.detail.value;
}

change you fab on value:

<ion-fab right bottom>
        <button *ngIf="segmentValue == 'friends'" ion-fab (click)="addToMarket()" color="primary" mini><img src="assets/imgs/add1.png"></button>
        <button *ngIf="segmentValue == 'enemies'" ion-fab (click)="plantNew()" color="primary" mini><img src="assets/imgs/add1.png"></button>
    </ion-fab>