Controlling component in Homepage (Angular/Ionic)

Issue

i am still new on Web app development, so please bear with me.

I am using Ion-Segment module (https://ionicframework.com/docs/api/segment), here how it looks like

<ion-segment value="1" (ionChange)="segmentChanged($event)">
      <ion-segment-button disabled value="floor">
        <ion-label>Floor</ion-label>
      </ion-segment-button>
      <ion-segment-button value="1">
        <ion-label>1</ion-label>
      </ion-segment-button>
      <ion-segment-button value="2">
        <ion-label>2</ion-label>
      </ion-segment-button>
      <ion-segment-button value="3">
        <ion-label>3</ion-label>
      </ion-segment-button>
      <ion-segment-button value="4">
        <ion-label>4</ion-label>
      </ion-segment-button>
      <ion-segment-button value="5">
        <ion-label>5</ion-label>
      </ion-segment-button>
      <ion-segment-button value="6">
        <ion-label>6</ion-label>
      </ion-segment-button>
      <ion-segment-button value="7">
        <ion-label>7</ion-label>
      </ion-segment-button>
      <ion-segment-button value="8">
        <ion-label>8</ion-label>
      </ion-segment-button>
      <ion-segment-button value="9">
        <ion-label>9</ion-label>
      </ion-segment-button>
    </ion-segment>

the segment do its job, filling a variable (says Floor) however, there is another functions that may change the Floor variable, thus the selected Ion-Segment is not changed accordingly.

How do i controls or change the selected segment from the Home.page.ts?

Solution

I realized its an easy fix, didnt realise it since i have so little experience on it. Define selected_floor:number on home.page.ts

and set: <ion-segment value={{selected_floor}} (ionChange)="segmentChanged($event)">

then u may set and change the value of selected_floor then the selected ion-segment will change accordingly.

Answered By - DoubleLiu