bug: ion-segment initial state failed when using NgModel with Angular

[tuif]

Bug Report

Ionic version: [x] 5.x**

Current behavior:

1. We are using ion-segment in modal with Angular. For connivence, we use NgModel for two-way binding the checked value of ion-segment.

2. When showing the modal for the first time, the ion-segment-button is checked when its value matches the bound variable.

   

3. After closing the modal, enter again. The ion-segment-button is not checked even if its value matches the bound variable, leaving all buttons unchecked.

   

Expected behavior: button is checked when its value equals the bound variable.

Steps to reproduce:

1. download code from the following link
2. npm i
3. ionic s

Related code: https://github.com/tuif/ionic5-segment

Ionic info:

Ionic:

   Ionic CLI                     : 6.1.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.0
   @angular-devkit/build-angular : 0.803.25
   @angular-devkit/schematics    : 8.3.25
   @angular/cli                  : 8.3.25
   @ionic/angular-toolkit        : 2.1.2

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 21 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.3.0

System:

   ios-sim : 8.0.2
   NodeJS  : v12.13.0 (/usr/local/bin/node)
   npm     : 6.13.7
   OS      : macOS Mojave
   Xcode   : Xcode 11.3.1 Build version 11C504

[danielpspring]

I'm experiencing the same issue using the ion-segment and NgModel. However, it's mixed. Some screens work all the time, some never and some only the first time.

[danielpspring]

Here's a sample project with two different segments. The first ion-segment works in the tab1 page (the default tab). The second ion-segment is in the modal screen that is opened via tab1 page. This segment does not work. Please execute "npm install" before running the app.

Note: this sample app is using Angular 8. My project is running angular 9 and is experiencing the same issue.

testTabs.zip

[dotocean]

+1 I have the same problem. On first load my segment buttons correctly show my ngModel, but on second load no segment button is selected.

[drugoi7]

Same here. I have the same problem with different pages and differente segments.

[liamdebeasi]

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue? 5.1.0-dev.202002172131.9d3e664

[danielpspring]

This appears to have fix the ion-segment issue. I'm still finding other (binding) issues but the segment is now working.

[dotocean]

@liamdebeasi Around when is the due date of 5.0.1 milestone?

[liamdebeasi]

We don't comment on the timeline of releases, but we do hope to have 5.0.1 out soon.

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic/pull/20495 and will be available in an upcoming release of Ionic Framework.

[dotocean]

We don't comment on the timeline of releases, but we do hope to have 5.0.1 out soon.

Ok I'm sorry, Thanks for the fix!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.