bug: Active segment button not highlighted when nested into async container

[leomazza]

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

v7.x

Current Behavior

A segment with dynamic value does not highlight the selected button when nested into an async container.

Expected Behavior

It should be highlighted just as it is usually the case.

Steps to Reproduce

1. Create an <ion-segment [value]="customValue"> with at least 2 <ion-segment-button>s.
2. Nest that one into a <div *ngIf="observable$ | async">.
3. See error

Code Reproduction URL

https://github.com/leomazza/ionic-segment-bug

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/leomazza/.nvm/versions/node/v20.10.0/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 7.6.4 @angular-devkit/build-angular : 17.0.10 @angular-devkit/schematics : 17.0.10 @angular/cli : 17.0.10 @ionic/angular-toolkit : 9.0.0

Capacitor:

Capacitor CLI : 5.6.0 @capacitor/android : not installed @capacitor/core : 5.6.0 @capacitor/ios : not installed

Utility:

cordova-res : 0.15.4 native-run : 2.0.0

System:

NodeJS : v20.10.0 (/Users/leomazza/.nvm/versions/node/v20.10.0/bin/node) npm : 10.2.3 OS : macOS Unknown

Additional Information

NOTE: The issue is with the second segment block. The first segment button is the selected one but it is not shown as active/checked.