Custom selected for ion-segment-button

Ionic Framework ionic-v3
1

I have a strange situation where I’m using the ion-segment buttons to set my event.field = the selected event.options object. It works how I’d like it to EXCEPT that it doesn’t keep the button clicked highlighted as selected.

Is there a way to set the selected element in another way? event.field, once the button is selected, becomes an object. The value of the button would be equal to event.field.field OR event.options[i].field.

Can someone help me?

<ion-segment (ngModel)="event.options" selected="event.field">
   <ion-segment-button (click)="changeField(d, e, i, event.options)" *ngFor="let options of event.options; let i = index" [value]="event.field">
   <ion-label color="primary">{{ options.field }}</ion-label>
   </ion-segment-button>
</ion-segment>
2

OOOOOOHHHHH!!! I figured it out!!!

Instead of trying to do selected=“event.field” in the ion-segment tag, I added this to the ion-segment-button tag:

                      [attr.checked]="event.field && event.field.field === options[i].field ? true : false"
3

ARGH! It DID fix the issue of showing which ion-segment-button was selected, but then it broke another part of my code that was supposed to show the data from the object assigned to event.field.

4

Your template syntax is wonky, and I think that’s the source of all the confusion here.

fruits = ["apple", "banana", "cherry"];
chosen = "banana";

<ion-segment [value]="chosen">
  <ion-segment-button *ngFor="let fruit of fruits" [value]="fruit" [innerText]="fruit"></ion-segment-button>
</ion-segment>

I think this sounds like what you’re describing you want, and the controller’s chosen property will always contain the active segment.

foo="bar" // literal "bar"
[foo]="bar" // value of controller's "bar" property, input binding
(foo)="bar()" // output binding to the "foo" event, call "bar()" method when it happens

…so your initial (ngModel) is only doing the output binding (from controller to host), I think the opposite of the direction you wanted, selected="event.field" is going to always evaluate to truthy, because the literal string "event.field" is truthy, and have nothing to do with the variable you’re trying to reference.

The definitive guide to all this (which is, in fairness, both one of the most commonly used and least commonly understood parts of Angular) is here.

1 Like
5

Thank you!!! I got it to work following your explanation here. You are right, the definitive guide is difficult to understand (but I keep trying).

<ion-segment [value]="event.field">
                    <ion-segment-button
                      mode="ios"
                      (click)="changeField(d, e, i, event.options)"
                      *ngFor="let option of event.options; let i = index"
                      [value]="option.field"
                      [innerText]="option.field"
                      [attr.selected]="option.field"
                    >
                    </ion-segment-button>
                  </ion-segment>

I’m posting the updated code so anyone else who has a similar issue can follow along with the same variable names.