Weird behavior with ion-segment


I have a list of 3 radio-group list and when I click on one of them, there is a ion-segment that shows up like this one:


Then, I save the data and when I come back, I retrieve my data to be able to activate the “Position” radio-button and the “A-Z” from my ion-segment. The radio button is selected, but not the ion-segment. This is the first problem even if I know the data is saved properly.

Then, if I click in the ion-segment, it is now a really light blue instead of the blue just above:


It looks like the blue when you hover the ion-segment.

Anyone already seen that before?


What is the code used to create this ion-segment?

Here is the HTML:

<ion-list radio-group [(ngModel)]="orderBy.orderBy">   
  <!-- Order by Position -->
    <ion-radio value="position"></ion-radio>

  <ion-item *ngIf="orderBy.orderBy === 'position'">
  <!--<ion-item [hidden]="orderBy.orderBy !== 'position'">-->
    <div padding>
      <ion-segment [(ngModel)]="orderBy.positionOrder">
        <ion-segment-button value="asc">A - Z</ion-segment-button>
        <ion-segment-button value="desc">Z - A</ion-segment-button>

Here is the TS

public orderBy: OrderByClass;

constructor(private _navParams: NavParams,
                 private _storage: Storage, 
                 public translate: TranslateService, 
                 private _viewCtrl: ViewController) {

  this.orderBy = JSON.parse(_navParams.get('orderBy'));

For now, just forget it. I reboot my computer and now it seems to work fine. Will see how long…


1 Like