In ionic framework how to set first ion-segment-button in active state by default?

android ios ionic-framework ionic2

38,367

Solution 1

This should be helpful: http://ionicframework.com/docs/v2/components/#segment

Also, if you dont have a value for home_tabs at the beginning than the ion-segment component will not know what exactly you want. To solve this you can make home_tabs = 'A' by default on the constructor so the first button will always be active

This is in your component:

export class SegmentPage {
   constructor() {      
     this.pet = "puppies";
 }
}

This is in your html:

<ion-segment [(ngModel)]="pet">
     <ion-segment-button value="puppies">
       Puppies
     </ion-segment-button>
     <ion-segment-button value="kittens">
       Kittens
     </ion-segment-button>
     <ion-segment-button value="ducklings">
       Ducklings
     </ion-segment-button>
</ion-segment>

You can see ngModel is pet, and in the constructor it is setting pet to be "puppies" so the ion-segment component will make the button that has value 'puppies' the active ion-segment-button

https://github.com/driftyco/ionic-preview-app/tree/master/app/pages/segments/basic

Solution 2

The correct way to do it in the current version is like this:

In your component:

export class SegmentPage {
 pet: string = "puppies";
   constructor() {}
}

This will set "puppies" as the default active segment

Solution 3

Ionic 4:- We can write the value attribute of ion-segment-

<ion-segment (ionChange)="segmentChanged($event)" 
      value="javascript">
      <ion-segment-button value="python">
        <ion-label>Python</ion-label>
      </ion-segment-button>
      <ion-segment-button value="javascript">
        <ion-label>Javascript</ion-label>
      </ion-segment-button>
    </ion-segment>

38,367

Author by

Dipak

"A computer program does what you tell it to do, not what you want it to do." ― Undefined "An expert is someone who knows more and more about less and less, until eventually he knows everything about nothing." ― Anonymous “But somethings in life are more important than being happy. Like being free to think for yourself." ― Jon Krakauer, Into The Wild “All thinking men are atheists.” ― Ernest Hemingway, A Farewell to Arms

Updated on July 09, 2022

Comments

Dipak almost 2 years
In ionic2 how to set the first ion-segment-button in ion-segment to be in active state? I have tried to do it with providing the active class to the ion-segment-button like :
```
 <div padding>
    <ion-segment [(ngModel)]="home_tabs">
        <ion-segment-button class="segment-button segment-activated"  value="A">A
        </ion-segment-button>
        <ion-segment-button value="B">B
        </ion-segment-button>
    </ion-segment>
</div>
```
But this didn't worked. I want make the first ion-segment-button to be inactive state and corresponding,
```
<ion-list *ngSwitchWhen="'A'" ></ion-list>
```
to be active state. How to do this?
Dipak about 8 years

Thanks, let me look through this. :)
Dipak about 8 years

what is this home_tabs and value? I cant see any configuration says home_tabs. Where is that configuration is written in the documentation example? :(
Denko Mancheski about 8 years

In your code you are binding ngModel to some variable called home_tabs which exist in your component's class. Inside the constructor you should have: this.home_tabs = 'A' so the ion-segment component will get the value and make the appropriate ion-segment-button active. You dont need to add the segment-activated class manually
Dipak about 8 years

Yes, thats it, I missed that part completely. Many many thanks.
The Sammie almost 7 years

@DenkoMancheski The link at the bottom doesn't work anymore. Please update post.
Atif Hussain about 6 years

Also, make sure. when you are showing segment at runtime base on the condition. then it necessary to add default condition is true when the constructor is called.
Shoeb Siddique almost 6 years

How to add the listener?
Khan Sharukh over 4 years

Struggled for 3 hours and found a simple answer, Thanks!