text: Ion-checkbox not updating in view - ionic-v3 - Ionic Forum
  Ion-checkbox not updating in view
  tom5677 October 7, 2019, 9:48pm #1
  I've a page with several checkboxes in ion-items using a formgroup:
  <form [formGroup]="form" novalidate>
  <ion-label color="primary">{{ "REACHABLE_BY_CAR" | translate }}</ion-label>
  <ion-checkbox item-right formControlName="reachable_car"></ion-checkbox>
  ... more checkboxes
  reachable_car: new FormControl(this.hut.reachable_car),
  Everything works fine, when I push the detail page from a list page and then push the page with the checkboxes.
  when I push the detail-page from a marker in Google maps and then push the page with the checkboxes, the view/page is not updating:
  When I click a checkbox, the checkbox doesn't change on the UI, but the form value changes (because the changes value is later saved correctly in the database).
  The checkboxes are also showing the correct values retrieved from the database and initialized with the form group.
  $ionic info
  Ionic CLI : 5.2.7 (C:\Users\tk\AppData\Roaming\npm\node_modules\ionic)
  Ionic Framework : ionic-angular 3.9.5
  @ionic/app-scripts : 1.3.7
  Cordova Platforms : android 8.0.0, ios 5.0.1
  rapropos October 7, 2019, 10:58pm #2
  tom5677:
  when I push the detail-page from a marker in Google maps and then push the page with the checkboxes,
  This code that interacts with the navigation is the crucial part. I'm going to speculate that you're jumping outside of the proper zone.
  tom5677 October 8, 2019, 6:06am #3
  What do you mean by "jumping outside of the proper zone"?
  This is the "navigation chain":
  // (maps page with Google Maps)
  marker.addEventListener(GoogleMapsEvent.INFO_CLICK).subscribe(e => {
  this.navCtrl.push('HutDetailPage', params);
  // (in HutDetailPage)
  // call as modal page
  let filterModal = this.modalCtrl.create(EditEquipmentPage, { hut: this.hut });
  filterModal.onDidDismiss(data => {
  this.prepareDisplayFields();
  filterModal.present();
  So actually the last page was not pushed but is a modal page…
  rapropos October 8, 2019, 6:06pm #4
  You shouldn't have to worry about it. If you're not using the ionic-native shim to deal with Google Maps, I would highly suggest doing so, at which point all these problems may ride merrily off into the sunset. This article, while dated now, still does a good job of describing the basic concept.
  marker.addEventListener(GoogleMapsEvent.INFO_CLICK).subscribe(e => { this.navCtrl.push('HutDetailPage', params); });
  So if this line is going outside anything Angular-aware, this is likely where the code inside the subscription is running outside the Angular zone and initiating the havoc.
  tom5677 October 8, 2019, 6:23pm #5
  If you're not using the ionic-native shim to deal with Google Maps
  I'm using the Google Maps ionic native plugin/wrapper:
  "@ionic-native/google-maps": {
  "version": "4.21.0",
  "cordova-plugin-googlemaps": {
  So if this line is going outside anything Angular-aware
  How can I judge, this happens? Actually with the page called there (HutDetailPage) everything works fine. This page then calls the modal where checkboxes are not showing the correct state.
  Do you need further inormation?
  rapropos October 8, 2019, 6:58pm #6
  How can I judge, this happens?
  According to the docs, there is a static assertInAngularZone method that you can call wherever you suspect you might have jumped, such as in that subscription that pushes the HutDetailPage. Another possibility that causes mysterious UI stoppage is when you have an uncaught exception somewhere. That can derail the entire change detection cycle - check your JavaScript console.
  tom5677 October 8, 2019, 7:05pm #7
  Thanks!! I'll check the same.
  Just for clarification: The UI ist still responsive. Scrolling works.
  Even when I click in the ion-item where the ion-checkbox is placed it visually shows the touch.
  Now I've observed that now the checkbox state changes on the UI - but after some delay. Seems, that it was a "timing" issue from the beginning. Not sure what's the reason for this.
  But I think we can close the topic for now, since it's OK from UX perspective. I'll not dig deeper right now to investigate on the root cause (because I've currently no idea how to do the debugging/analysis).