Skip to content

bug: Swipeable Segments - segment not connecting to segment-view in Angular #30000

@Hesesses

Description

@Hesesses

Prerequisites

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    type: buga confirmed bug report

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions