Ionic-framework: Cannot select ion-segment by default

[ix-xerri]

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/driftyco/ionic-v1)
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

I'm trying to select an ion-segment by default and it's not preselecting.

this is the code I have in the html

<div [ngSwitch]="gmap"> <ion-list *ngSwitchCase="'showMap'"> </ion-list>

and in the component I have a simple gmap: string; and this.gmap = "showMap";. The tabs work as intended but I cannot preselect a segment by default. This use to work in Ionic2 but doesn't work when upgrading to Ionic3

[jgw96]

Hello, thanks for using Ionic. Could you post a repo or plunker we could use to reproduce this issue?

[ix-xerri]

try have a look at https://plnkr.co/edit/VtAh7WM1ZO9AqFdaQRoE?p=preview

[ix-xerri]

@jgw96 you added a label that it's for v2. I'm currently upgrading to v3 with this being left. I look at ion-segments docs and nothing has changed. This was implemented in v2.

[ix-xerri]

Upgraded to 3.3.0. Note that the select work as I set 'gmap' to 'showList' but not 'showMap'. So selecting the first tab does not work.

[ix-xerri]

any updates on this issue?

[ix-xerri]

Here is more information. I am using ion-tab but I tried to set a timeout to select the tab I want, thinking that it is somehow being set before the page loads but it also fails.

[monad98]

Similar problem here, with the "puppies, kittens" demo, 'segment-activated' class is not applied to initially selected ion-segment-button.

[danishin]

I can also confirm this with Ionic 3.5.0. It seems likesegment-activated class is simply not applied to the currently selected segment.

It only updates to the initial value after I do something that invokes change detection like clicking button etc.

[ix-xerri]

Solved after reading this page. Disabled changeDetection

[danishin]

Can also confirm that removing ChangeDetectionStrategy.OnPush from @Component does make it work.
I guess somewhere in changeDetection there is a bug?

[aslaugsollilja]

no news on this??

[elvisgn]

The more detailed issue/workaround/future is here https://github.com/ionic-team/ionic/issues/9374

[himanshu1018]

i want to add the auto-scrolling on "segments" to center of the page which are being activated, when i click the segment link on side-menu bar? how do i achieve that, please help?
thanks in advance

[elvisgn]

@himanshu1018 : Kindly open a separate ticket for this as they are unrelated issues...in any case you can use the ngOnInit method, get the height of the content element and call this.content.scrollTo(0, contentHeight/2, 300);

[javalight]

If your issues was ChangeDetectionStrategy.OnPush breaking it: this worked for me.

constructor(public ref: ChangeDetectorRef){}

ionViewDidEnter() {
this.ref.markForCheck();
}

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.