ionic 4 Segment Tab not Changing with Slider Page change - Problem

[akr4m]

in ionic 4, slider page is working good. but the problem is with segment tab. When slider page is changing, segment tab not changing. I am able to do that when segment tab changing, then slider page is changing correctly. @ViewChild('firstSlider') slider: ElementRef; this.slider.nativeElement.getActiveIndex()

these are working good.

[mikev10]

I was able to get this working by using async and await the active index.

Here is an example for the ts page:

@ViewChild('slider') slider: Slides;
 page = "0";

selectedTab(index) {
    this.slider.slideTo(index);
}

async moveButton() {
    let index = await this.slider.getActiveIndex();
    this.page = index.toString();
} 

Here is the html page:

<ion-header>

    <ion-toolbar color="primary">
      <ion-title>Segment Buttons</ion-title>
    </ion-toolbar>

    <ion-toolbar color="primary">
      <ion-segment (ionChange)="segmentChanged($event)" [(ngModel)]="page">
        <ion-segment-button value="0" (click)="selectedTab(0)">
          Button 0
        </ion-segment-button>
        <ion-segment-button value="1" (click)="selectedTab(1)">
          Button 1
        </ion-segment-button>
        <ion-segment-button value="2" (click)="selectedTab(2)">
          Button 2
        </ion-segment-button>
      </ion-segment>
    </ion-toolbar>

</ion-header>

<ion-content>
  <ion-slides #slider (ionSlideWillChange)="moveButton()">
    <ion-slide>
        <h1>Slide 2</h1>
    </ion-slide>

    <ion-slide>
      <h1>Slide 2</h1>
    </ion-slide>

    <ion-slide>
      <h1>Slide 3</h1>
    </ion-slide>
  </ion-slides>
</ion-content>

Hope this helps!

[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.