Search code examples
androidiosionic-frameworkionic2

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

In ionic2 how to set the first ion-segment-button in ion-segment to be in active state? I have tried to do it by 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 work. I want to make the first ion-segment-button to be inactive state and corresponding,

    <ion-list *ngSwitchWhen="'A'" ></ion-list>

to be in active state. How to do this?

Solution

  • 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