Ionic segment only change after clicking on content input

Question

Im building photo editing app using ionicv2 and Adobe Creative SDK. I've succesfully implemented creative SDK.

After CSDK succesfully returns the url of the edited file, I push a page containing segment along with the file URL.

The problem is on the second page, when I click on the segment, it does not switch. It will only switch if I click on the input inside the page.

I tried doing it without the CSDK and it runs without any problem.

My Code:

loadCamera(sourceType){

    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      sourceType: sourceType
    }

    this.camera.getPicture(options).then((imageData) => {

      // imageData is either a base64 encoded string or a file URI
      // If it's base64:
      let base64Image = 'data:image/jpeg;base64,' + imageData;

      var thisModule = this;

      function success(newUrl) {
          console.log("Success Editing!", newUrl);
          thisModule.goToCreate(newUrl);
      }

      function error(error) {
          console.log("Error!", error);
      }

      /* Optional `options` object. See API guide for usage. */
      var options = {
           outputType: CSDKImageEditor.OutputType.JPEG, 
           quality: 70
      };

      /* Launch the Image Editor */
      CSDKImageEditor.edit(success, error, base64Image, options);
    }, (err) => {
    // Handle error
    });

  }

  /* Push a new page along with url */
  goToCreate(url){
    this.nav.push(SecondPage, {url: url});
  }

}

Second Page (Contains segment component)

section: string;
url: string;

  constructor(...) {
    this.url = navParams.get('url');
    console.log(this.url); //Working Perfectly

    this.section = "segment1";
  }

  onSegmentChanged(segmentButton: SegmentButton) {
    // console.log('Segment changed to', segmentButton.value);
  }

  onSegmentSelected(segmentButton: SegmentButton) {
    // console.log('Segment selected', segmentButton.value);
  }

Second Page HTML (When I click on segment 2, its not going there unless I click on the input inside segment 1)

<ion-content class="secondpage-content">
  <ion-segment class="secondpage-segment" [(ngModel)]="section" (ionChange)="onSegmentChanged($event)">
    <ion-segment-button value="segment1" (ionSelect)="onSegmentSelected($event)">
      Segment 1
    </ion-segment-button>
    <ion-segment-button value="segment2" (ionSelect)="onSegmentSelected($event)">
      Segment 2
    </ion-segment-button>
    <ion-segment-button value="segment3" (ionSelect)="onSegmentSelected($event)">
      Segment 3
    </ion-segment-button>
  </ion-segment>
  <div [ngSwitch]="section">
    <div *ngSwitchCase="'segment1'" >
      <ion-item>
        <ion-label floating>Input</ion-label>
        <ion-input type="text" formControlName="input_example"></ion-input>
      </ion-item>
    </div>
    <div *ngSwitchCase="'segment2'" >
    </div>
    <div *ngSwitchCase="'segment3'" >
    </div>
  </div>
</ion-content>

Plus, console logs is not returning any errors. Do you have any idea on whats going on? I really think its related with the CSDK. Thank you

Answer 1

I encountered same kind of issue with segment. Way I tackled it was:

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, Segment, ModalController } from 'ionic-angular';

section: string;
url: string;
@ViewChild(Segment)
private segment: Segment;
constructor(...) {
    this.url = navParams.get('url');
    console.log(this.url); //Working Perfectly

    this.section = "segment1";
    setTimeout(() => {
        if (this.segment) {
            this.segment.ngAfterContentInit();
            this.segment._inputUpdated();
            this.onSegmentChanged(null)
        }
    });
}

onSegmentChanged(segmentButton: SegmentButton) {
    // console.log('Segment changed to', segmentButton.value);
}

onSegmentSelected(segmentButton: SegmentButton) {
    // console.log('Segment selected', segmentButton.value);
}

Answer 2

I got the same problem here. I don't have same problem on my other work before, but under some unknown reason it just happen.

    this.segment.ngAfterContentInit();

won't help neither.

And I found this solution work for me.

1. add a event handle ionChange in html

   <ion-segment [(ngModel)]="cat" (ionChange)=onSegmentChanged($event)>
   

2. 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();
   } 
   }
   

Answer 3

In my case, after I have added the ChangeDetectorRef alongside the NgZone, it still did not work until I added ngModel on the ion-segment which I referenced the ngSwitch.