Segment content not changed until I click on facebook popup messenger input field

Question

I'm new to ionic... I'm developing an app with QRcode scanner feature using (https://ionicframework.com/docs/native/qr-scanner/). After scanning a qrcode, my app will navigate to a segment page. The problem is after the app navigate to the segment page...when i click on the segment, the content does not switch. If the navigation is not from Qrcode works fine.

take a look at this gif

The Weird thing

The weirdest thing i found out is when i'm on that segment page, i use facebook popup messenger and click on the reply input field, the content will switch.

here's my code

QRCode scanner page :

ionViewWillEnter() {
//this.navCtrl.push(RackPage, {id: 1})  <---the segment page will not have any problem if i use this code
this.showCamera();
// Optionally request the permission early
this.qrScanner.prepare()
  .then((status: QRScannerStatus) => {
    if (status.authorized) {

      this.scanSub = this.qrScanner.scan().subscribe((rackId: string) => {
        this.navCtrl.push(RackPage, { 'id': rackId })
      });

      this.qrScanner.show();

    } else if (status.denied) {
      console.log('Camera permission denied');
    } else {
      console.log('Permission denied for this runtime.');
    }
  })
  .catch((e: any) => console.log('Error is', e));
  }

 ionViewWillLeave() {
   this.qrScanner.hide(); // hide camera preview
   if (this.scanSub != undefined)
     this.scanSub.unsubscribe(); // stop scanning
   this.hideCamera();
 }

showCamera() {
(window.document.querySelector('ion-app') as HTMLElement).classList.add('cameraView');
}

hideCamera() {
  (window.document.querySelector('ion-app') as HTMLElement).classList.remove('cameraView');
 }

Segment Page :

constructor(
public navCtrl: NavController,
public navParams: NavParams
) {
this.rackId = navParams.get('id');
console.log(this.rackId); //no problem here
}

segmentChanged(segment: any) {
    console.log(this.type); //no problem here (type variable are switching but content does not)
}

Segment Page HTML

<ion-header>
  <ion-navbar no-border-bottom>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Segment Page
    </ion-title>
  </ion-navbar>

  <ion-toolbar no-border-top>
    <ion-segment [(ngModel)]="type" (ionChange)="segmentChanged($event.value)">
      <ion-segment-button value="Info">
        <ion-icon name="alert"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="Devices">
         <ion-icon name="apps"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="Actions">
        <ion-icon name="build"></ion-icon>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>


<ion-content>
  <div [ngSwitch]="type">
    <ion-list *ngSwitchCase="'Info'">
       <p>info</P>
    </ion-list>

    <ion-list *ngSwitchCase="'Devices'">
       <p>Devices</p>
    </ion-list>

    <ion-list *ngSwitchCase="'Actions'">
        <p>Actions</p>
    </ion-list>
  </div>
</ion-content>

consolelogs (as requested)

Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 --consolelogs
--nobrowser --iscordovaserve --platform android --target cordova - Ctrl+C to cancel
[13:02:35]  watch started ...
[13:02:35]  build dev started ...
[13:02:36]  clean started ...
[13:02:36]  clean finished in 4 ms
[13:02:36]  copy started ...
[13:02:36]  deeplinks started ...
[13:02:36]  deeplinks finished in 74 ms
[13:02:36]  transpile started ...
[13:02:40]  transpile finished in 3.89 s
[13:02:40]  preprocess started ...
[13:02:40]  preprocess finished in less than 1 ms
[13:02:40]  webpack started ...
[13:02:40]  copy finished in 4.95 s
[13:02:45]  webpack finished in 4.86 s
[13:02:45]  sass started ...
Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.
[13:02:48]  sass finished in 3.06 s
[13:02:48]  postprocess started ...
[13:02:48]  postprocess finished in less than 1 ms
[13:02:48]  lint started ...
[13:02:48]  build dev finished in 12.44 s
[13:02:48]  watch ready in 12.69 s
[13:02:48]  dev server running: http://localhost:8100/

[OK] Development server running!
     Local: http://localhost:8100
     External: http://192.168.43.120:8100


> cordova run android
[13:02:50]  tslint: D:/eko_mobile/src/provider/PushService.ts, line: 4
            All imports on this line are unused.

       L3:  import { Events } from "ionic-angular";
       L4:  import { Common } from "../common/Common";
       L5:  import swal from 'sweetalert2';

[13:02:50]  lint finished in 2.56 s
ANDROID_HOME=C:\Users\Sam\AppData\Local\Android\sdk
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_171
Subproject Path: CordovaLib
The Task.leftShift(Closure) method has been deprecated and is scheduled to be removed in Gradle 5.0. Please use Task.doLast(Action) instead.

        at build_ednj5i54gplic1hf602n6ynb.run(D:\eko_mobile\platforms\android\build.gradle:145)
The JavaCompile.setDependencyCacheDir() method has been deprecated and is scheduled to be removed in Gradle 4.0.

Incremental java compilation is an incubating feature.

The TaskInputs.source(Object) method has been deprecated and is scheduled to be removed in Gradle 4.0. Please use TaskInputs.file(Object).skipWhenEmpty() instead.

:preBuild
 UP-TO-DATE
:preDebugBuild
UP-TO-DATE
:checkDebugManifest
:preReleaseBuild UP-TO-DATE
:CordovaLib:preBuild UP-TO-DATE
:CordovaLib:preDebugBuild UP-TO-DATE
:CordovaLib:checkDebugManifest
:CordovaLib:prepareDebugDependencies
:CordovaLib:compileDebugAidl

UP-TO-DATE
:CordovaLib:compileDebugNdk

UP-TO-DATE
:CordovaLib:compileLint

UP-TO-DATE
:CordovaLib:copyDebugLint

UP-TO-DATE
:CordovaLib:mergeDebugShaders

UP-TO-DATE
:CordovaLib:compileDebugShaders

UP-TO-DATE
:CordovaLib:generateDebugAssets UP-TO-DATE
:CordovaLib:mergeDebugAssets

UP-TO-DATE
:CordovaLib:mergeDebugProguardFiles
 UP-TO-DATE
:CordovaLib:packageDebugRenderscript

UP-TO-DATE
:CordovaLib:compileDebugRenderscript

UP-TO-DATE
:CordovaLib:generateDebugResValues

UP-TO-DATE
:CordovaLib:generateDebugResources UP-TO-DATE
:CordovaLib:packageDebugResources

UP-TO-DATE
:CordovaLib:processDebugManifest

UP-TO-DATE
:CordovaLib:generateDebugBuildConfig

UP-TO-DATE
:CordovaLib:processDebugResources

UP-TO-DATE
:CordovaLib:generateDebugSources UP-TO-DATE
:CordovaLib:incrementalDebugJavaCompilationSafeguard

UP-TO-DATE
:CordovaLib:compileDebugJavaWithJavac

UP-TO-DATE
:CordovaLib:processDebugJavaRes

UP-TO-DATE
:CordovaLib:transformResourcesWithMergeJavaResForDebug

UP-TO-DATE
:CordovaLib:transformClassesAndResourcesWithSyncLibJarsForDebug

UP-TO-DATE
:CordovaLib:mergeDebugJniLibFolders

UP-TO-DATE
:CordovaLib:transformNative_libsWithMergeJniLibsForDebug

UP-TO-DATE
:CordovaLib:transformNative_libsWithSyncJniLibsForDebug

UP-TO-DATE
:CordovaLib:bundleDebug

UP-TO-DATE
:CordovaLib:preReleaseBuild UP-TO-DATE
:CordovaLib:checkReleaseManifest

:CordovaLib:prepareReleaseDependencies
:CordovaLib:compileReleaseAidl

UP-TO-DATE
:CordovaLib:compileReleaseNdk

UP-TO-DATE
:CordovaLib:copyReleaseLint

UP-TO-DATE
:CordovaLib:mergeReleaseShaders

UP-TO-DATE
:CordovaLib:compileReleaseShaders

UP-TO-DATE
:CordovaLib:generateReleaseAssets UP-TO-DATE
:CordovaLib:mergeReleaseAssets UP-TO-DATE
:CordovaLib:mergeReleaseProguardFiles UP-TO-DATE
:CordovaLib:packageReleaseRenderscript

UP-TO-DATE
:CordovaLib:compileReleaseRenderscript

UP-TO-DATE
:CordovaLib:generateReleaseResValues
 UP-TO-DATE

:CordovaLib:generateReleaseResources UP-TO-DATE
:CordovaLib:packageReleaseResources
 UP-TO-DATE

:CordovaLib:processReleaseManifest

UP-TO-DATE
:CordovaLib:generateReleaseBuildConfig
 UP-TO-DATE

:CordovaLib:processReleaseResources

UP-TO-DATE
:CordovaLib:generateReleaseSources UP-TO-DATE
:CordovaLib:incrementalReleaseJavaCompilationSafeguard

UP-TO-DATE
:CordovaLib:compileReleaseJavaWithJavac

UP-TO-DATE
:CordovaLib:processReleaseJavaRes

UP-TO-DATE
:CordovaLib:transformResourcesWithMergeJavaResForRelease
 UP-TO-DATE

:CordovaLib:transformClassesAndResourcesWithSyncLibJarsForRelease
 UP-TO-DATE

:CordovaLib:mergeReleaseJniLibFolders
 UP-TO-DATE

:CordovaLib:transformNative_libsWithMergeJniLibsForRelease

UP-TO-DATE
:CordovaLib:transformNative_libsWithSyncJniLibsForRelease
 UP-TO-DATE

:CordovaLib:bundleRelease
 UP-TO-DATE

:prepareComAndroidSupportAppcompatV72310Library
 UP-TO-DATE

:preDebugAndroidTestBuild UP-TO-DATE
:prepareComAndroidSupportMultidex101Library
 UP-TO-DATE

:prepareComAndroidSupportSupportCompat2520Library
 UP-TO-DATE

:prepareComAndroidSupportSupportCoreUi2520Library
 UP-TO-DATE

:prepareComAndroidSupportSupportCoreUtils2520Library

UP-TO-DATE
:prepareComAndroidSupportSupportFragment2520Library
 UP-TO-DATE

:prepareComAndroidSupportSupportMediaCompat2520Library
 UP-TO-DATE

:prepareComAndroidSupportSupportV132510Library
 UP-TO-DATE

:prepareComAndroidSupportSupportV42520Library
 UP-TO-DATE

:prepareComGoogleAndroidGmsPlayServicesBasement1101Library
 UP-TO-DATE
:prepareComGoogleAndroidGmsPlayServicesTasks1101Library
 UP-TO-DATE

:prepareComGoogleFirebaseFirebaseAnalytics1101Library
 UP-TO-DATE

:prepareComGoogleFirebaseFirebaseAnalyticsImpl1101Library
 UP-TO-DATE
:prepareComGoogleFirebaseFirebaseCommon1101Library
 UP-TO-DATE
:prepareComGoogleFirebaseFirebaseCore1101Library
 UP-TO-DATE
:prepareComGoogleFirebaseFirebaseIid1101Library

UP-TO-DATE
:prepareComGoogleFirebaseFirebaseMessaging1101Library

UP-TO-DATE
:prepareComJourneyappsZxingAndroidEmbedded330Library
 UP-TO-DATE

:prepareMeLeolinShortcutBadger1117Library

UP-TO-DATE
:prepareOrgApacheCordovaCordovaLib630DebugLibrary

UP-TO-DATE
:prepareDebugDependencies
:compileDebugAidl

UP-TO-DATE
:compileDebugRenderscript

UP-TO-DATE
:generateDebugBuildConfig

UP-TO-DATE
:generateDebugResValues

UP-TO-DATE
:processDebugGoogleServices
Parsing json file: D:\eko_mobile\platforms\android\google-services.json
:generateDebugResources

:mergeDebugResources
 UP-TO-DATE

:processDebugManifest

UP-TO-DATE
:processDebugResources
 UP-TO-DATE

:generateDebugSources UP-TO-DATE
:incrementalDebugJavaCompilationSafeguard

UP-TO-DATE
:compileDebugJavaWithJavac

UP-TO-DATE
:compileDebugNdk

UP-TO-DATE
:compileDebugSources UP-TO-DATE
:mergeDebugShaders
 UP-TO-DATE

:compileDebugShaders

UP-TO-DATE
:generateDebugAssets UP-TO-DATE
:mergeDebugAssets

:transformClassesWithJarMergingForDebug
 UP-TO-DATE

:transformClassesWithMultidexlistForDebug
 UP-TO-DATE

:transformClassesWithDexForDebug
 UP-TO-DATE
:mergeDebugJniLibFolders
 UP-TO-DATE

:transformNative_libsWithMergeJniLibsForDebug
 UP-TO-DATE

:processDebugJavaRes
 UP-TO-DATE

:transformResourcesWithMergeJavaResForDebug
 UP-TO-DATE

:validateSigningDebug
:packageDebug

:assembleDebug
:cdvBuildDebug

BUILD SUCCESSFUL

Total time: 5.569 secs
Built the following apk(s):
        D:/eko_mobile/platforms/android/build/outputs/apk/android-debug.apk

ANDROID_HOME=C:\Users\Sam\AppData\Local\Android\sdk
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_171
No target specified, deploying to device 'P6LDU16B04000651'.
Skipping build...

Built the following apk(s):
        D:/eko_mobile/platforms/android/build/outputs/apk/android-debug.apk
Using apk: D:/eko_mobile/platforms/android/build/outputs/apk/android-debug.apk

Package name: io.ionic.ekoapp
LAUNCH SUCCESS

[13:03:06]  console.log: Angular is running in the development mode. Call enableProdMode() to enable the production
            mode.
[13:03:06]  console.log: OPEN database: _ionicstorage
[13:03:06]  console.log: new transaction is queued, waiting for open operation to finish
[13:03:06]  console.log: OPEN database: _ionicstorage - OK
[13:03:06]  console.log: DB opened: _ionicstorage
[13:03:06]  console.log: Ionic Native: deviceready event fired after 1881 ms
[13:03:07]  console.log: We have permission to send push notifications
[13:03:15]  console.log: 1 // <--rackID
[13:03:16]  console.log: Actions //when click on action segment
[13:03:17]  console.log: Devices //when click on devices segment

Please help, thanks in advance..

yes...if i changed to `this.navCtrl.setRoot(RackPage, { 'id': rackId })` instead of `navCtrl.push` the menuToggle will work — Mc Sam, Jun 15 '18 at 04:16
Then, please give it a try to make `this.qrScanner.show();` as comment. — Hyuck Kang, Jun 15 '18 at 04:22
too bad the solution does not solve the issue...i will upload a gif of my case so that you can have a better understand — Mc Sam, Jun 15 '18 at 04:33
How about sharing console logs also? It seems that **unsubscribing** should be needed. — Hyuck Kang, Jun 15 '18 at 04:56
The logs attached does not contain logs related to question. — Hyuck Kang, Jun 15 '18 at 05:19
but it didn't came out any log error when i click on the segment — Mc Sam, Jun 15 '18 at 05:21
ow..i have comment the line when i was running...I have edited the post... — Mc Sam, Jun 15 '18 at 05:30

score 0 · Accepted Answer · answered Jun 18 '18 at 02:25

Finally I'm able to solve this problem by referring answer from this post.

Simply add module ChangeDetectorRef and event handler in ts

import { ChangeDetectorRef } from '@angular/core';        
...
export class xxxPage {
...
constructor(
 private cf: ChangeDetectorRef,
...
}
...
onSegmentChanged(obj)
{        
  this.cf.detectChanges();
} 
}

Thanks. :)

Segment content not changed until I click on facebook popup messenger input field

1 Answers1