bug: ion-segment initial state failed when using NgModel with Angular
See original GitHub issueBug Report
**Ionic version: [x] 5.x
Current behavior:
-
We are using ion-segment in modal with Angular. For connivence, we use NgModel for two-way binding the checked value of ion-segment.
-
When showing the modal for the first time, the ion-segment-button is checked when its value matches the bound variable.
-
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:
- download code from the following link
- npm i
- 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
Issue Analytics
- State:
- Created 4 years ago
- Comments:11 (3 by maintainers)
Top Results From Across the Web
bug: ion-segment initial state failed when using NgModel with ...
Current behavior: We are using ion-segment in modal with Angular. For connivence, we use NgModel for two-way binding the checked value of ion...
Read more >Binding to ngModel in Ionic Framework - Stack Overflow
The ngModel directive comes from the FormsModule. The error is saying that it is unable to find the directive ("unknown"), which is almost ......
Read more >error in angular with shared module: generates "appears in ...
I have found a part of the problem. I have a component directive called TriState, showing 3 buttons. This is tristate.module.ts:
Read more >ion-input: Custom Input Value Type Styling and CSS Properties
ion-input is a wrapper to the HTML input element, with custom value type styling and functionality. It works on desktops and integrates with...
Read more >cannot read properties of undefined (reading 'ondestroy')
Try to remove the .angular directory! worked for me. Open side panel. Not using ngOnDestroy and getting error "Cannot read properties of undefined...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Ok I’m sorry, Thanks for the fix!
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.