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?
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With