Ionic segment-button is not focus by default

Issue

How to set the segment-button is pressed as default? I had set aria-pressed=true it doesn't work.

<ion-card class="card card-md">
  <ion-card-content class="card-content card-content-md">

    <ion-segment [ngClass]="platformnow" [(ngModel)]="getTaskList">
      <ion-segment-button class="segment-button" role="button" tappable="" value="onGoing" aria-pressed="true">
        Normal
      </ion-segment-button>
      <ion-segment-button class="segment-button" role="button" tappable="" value="history" aria-pressed="false">
        Complete
      </ion-segment-button>
      <ion-segment-button class="segment-button" role="button" tappable="" value="queue" aria-pressed="false">
        High
      </ion-segment-button>
      <ion-segment-button class="segment-button" role="button" tappable="" value="other" aria-pressed="false">
        Other
      </ion-segment-button>
    </ion-segment>
    <div [ngSwitch]="getTaskList">
      <button ion-item (click)="viewDetailP()" *ngSwitchCase="'history'">history &nbsp;<ion-icon name="timer"></ion-icon>
</button>
      <button ion-item (click)="viewDetailP()" *ngSwitchCase="'onGoing'">on going &nbsp;<ion-icon name="timer"></ion-icon>
</button>
      <button ion-item (click)="viewDetailP()" *ngSwitchCase="'queue'">on going &nbsp;<ion-icon name="timer"></ion-icon>
</button>
      <button ion-item (click)="viewDetailP()" *ngSwitchCase="'other'">other &nbsp;<ion-icon name="timer"></ion-icon></button>
    </div>
  </ion-card-content>
</ion-card>

The output of my code, one of the tab should be pressed by default:

Solution

You have to define variable in ts like

getTaskList: String = "onGoing";

Full example here

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

Answered By - Paresh Gami