Ion-segment issues

Ionic Framework ionic-v3
1

Segment content changes but segment button selection does not change

html snippet is as below

<ion-segment [(ngModel)]="segment" ion-text color="primary">
	<ion-segment-button value="login">Log In</ion-segment-button>
 	<ion-segment-button value="signup" ion-text color="primary">Sign Up</ion-segment-button>
</ion-segment>

<div [ngSwitch]="segment">
       <ion-list *ngSwitchCase="'login'">
            <someTags>
       </ion-list>
       <ion-list *ngSwitchCase="'signup'">
            <someTags>
       </ion-list>
</div>

On successfully creating a user, I popup an alert and would like to switch the segment to the ‘login’. I do the following:

this.signUp(this.registerForm.get('username').value, this.registerForm.get('password').value)
			.then(result => {
				if (result.signup) {
					console.log('LoginPage :: onSignup : Switch to Login');
					this.registerForm.reset();
					this.segment = 'login';
					this.cd.detectChanges();
				} else {
					console.log('LoginPage :: onSignup : Remain on SignUp');
					this.segment = 'signup';
					this.cd.detectChanges();
				}
			});

I find that the signup form gets cleared and the ion-list switches to that of the login…BUT the segment button selection remains on the signup…

Any ideas ?

1 Like
2

Something sketchy is going on somewhere outside what you have posted. Modifying the bound segment property switches segment buttons, even without manual change detection as it looks like you are using.

3

You are right, there is something sketchy going on outside but I’ve not been able to identify it yet.

I recreated a blank app just to test a simple segment and as you said, things work even without changeDetection.

So i came back to my project and created a test page with just a segment with buttons and a function call to switch the segments…it doesn’t work (segment switches but segment tab remains same).

I updated cordova, ionic, angular…can’t figure what else could be different between the two apps.

4

Finally !!

After creating a dummy project and literally moving each piece of code one-by-one, I finally got the problem…

changeDetectionStrategy with ion-segment has some sort of a bug…

If changeDetection is active on a page, the ion-segment default page selection does not work…if you disable the changeDetection, segment selection starts working.

2 Likes
5

I can confirm removing ChangeDetectionStrategy.OnPush from @Component makes it work.
I guess somewhere in changeDetection there is a bug?

6

For everyone’s benefit

Ionic Bug #9374

1 Like
7

Ran into this issue as well for my ion-segment. Here’s how I fixed it. I used the ChangeDetectorRef and detected my changes everytime the ion-segment called (ionChange).

<ion-segment [(ngModel)]="status" style="margin: 20px 0" (ionChange)="segmentChanged()" >

 segmentChanged()
  {
    this.cf.detectChanges();
  }
3 Likes
8

I had this issue occurring only on actual mobile devices and emulators; not in ionic serve.

It happened whether I was using ngSwitchCase or multiple ngIfs. Calling detectChanges() manually worked for me, which is crazy. Seems like something is definitely broken.

1 Like
9

In my case segment doesn’t work when I use my Ionic App into an Electron page.
When I click on a segment it doesn’t show the data of the chosen segment.
It was working just until some day ago, an update broke this feature.
It still works using ionic serve.
I’m looking for the update that caused this thing.

Ionic:
   ionic (Ionic CLI)  : 4.0.3 
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.11

Cordova:
   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.1.1

System:
   Android SDK Tools : 26.1.1
   NodeJS            : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm               : 6.2.0
   OS                : Windows 10
10

I’ve solved using your suggestions:

1) **deliveries.html**
<ion-segment [(ngModel)]="docstatus" (ionChange)="segmentChanged()" >
	
	
2) **deliveries.ts**
import { Component,ChangeDetectorRef } from '@angular/core';


  constructor(private cf: ChangeDetectorRef) {
    // init data
  }

  segmentChanged()
  {
    this.cf.detectChanges();
  }

Now the Segment component works again.
Thank you @bhann2 and @cadencity.

cld

5 Likes
11

@ioclaudio Thanks for sharing the code. It worked for me, too.

12

Thank you :slight_smile: Works for me too : )