bug: Swipeable Segments

[Hesesses]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

Swipeble segments' segment buttons not working with variables:

<ion-segment mode="md" [value]="value">
  @for (button of buttons; track button.label) {
    <ion-segment-button [value]="button.value" [contentId]="button.value">
      <ion-label>{{ button.label }}</ion-label>
    </ion-segment-button>
  }
</ion-segment>

If I add manually segment-button with the content-id of the first segment view (general) it works:

<ion-segment mode="md" [value]="value" (ionChange)="onChange.emit($event)" [scrollable]="true">
  <ion-segment-button [value]="" content-id="general" style="margin-right:0px"></ion-segment-button>
  @for (button of buttons; track button.label) {
  ....

If I add the same like this [contentId]= it doesnt work:

  <ion-segment mode="md" [value]="value" (ionChange)="onChange.emit($event)" [scrollable]="true">
  <ion-segment-button [value]="" [contentId]="'general'" style="margin-right:0px"></ion-segment-button>
  @for (button of buttons; track button.label) {

Note: ion-segment-views are swipeable, swiping doesnt change active status of segment buttons or clicking segment-buttons doesnt change the view.

Expected Behavior

Swipeable tabs would work when using variables for content-id / [contentId]

Steps to Reproduce

Play around with the code on "current behaviour"

Code Reproduction URL

no url

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/.../.nvm/versions/node/v18.20.4/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 8.4.0 @angular-devkit/build-angular : 17.3.11 @angular-devkit/schematics : 17.3.11 @angular/cli : 17.3.11 @ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 6.1.2 @capacitor/android : 6.1.2 @capacitor/core : 6.1.2 @capacitor/ios : 6.1.2

Utility:

cordova-res : not installed globally native-run : 2.0.1

System:

NodeJS : v18.20.4 (/Users/.../.nvm/versions/node/v18.20.4/bin/node) npm : 10.7.0 OS : macOS Unknown

Additional Information

No response

[marcoagsa]

I’m experiencing the same issue reported and have created an example on StackBlitz to help demonstrate it: stackblitz Example Could you please take a look and let me know if there’s any solution or workaround available?

Thank you for your assistance!

[Hesesses]

Any updates on this?

[tanner-reits]

@Hesesses Sorry for the delay. Confirmed there's something wrong here and I'll take a look. Thanks!