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

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

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

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>