Sliding Segments Ionic v2

slidespage.html

<ion-toolbar>
  <ion-segment [(ngModel)]="selectedSegment" (ionChange)="onSegmentChanged($event)">
    <ion-segment-button value="first">
      First
    </ion-segment-button>
    <ion-segment-button value="second">
      Second
    </ion-segment-button>
    <ion-segment-button value="third">
      Third
    </ion-segment-button>
  </ion-segment>
</ion-toolbar>

<ion-content padding>

  <ion-slides #mySlider (ionDidChange)="onSlideChanged($event)">
    <ion-slide *ngFor="let slide of slides">
      <h1>{{ slide.title }}</h1>
    </ion-slide>
  </ion-slides>

</ion-content>

<style>
  ion-scroll {
    width: 100%;
    height: 100%;
  }
</style>

slidespage.ts

import { Component, ViewChild } from '@angular/core';
import { NavController, Slides } from 'ionic-angular';

@Component({
  selector: 'page-slidespage',
  templateUrl: 'slidespage.html'
})
export class SlidesPage {
  @ViewChild('mySlider') slider: Slides;
  selectedSegment: string;
  slides: any;

  constructor(public navCtrl: NavController) {
    this.selectedSegment = 'first';
    this.slides = [
      {
        id: "first",
        title: "First Slide"
      },
      {
        id: "second",
        title: "Second Slide"
      },
      {
        id: "third",
        title: "Third Slide"
      }
    ];
  }

  onSegmentChanged(segmentButton) {
    console.log("Segment changed to", segmentButton.value);
    const selectedIndex = this.slides.findIndex((slide) => {
      return slide.id === segmentButton.value;
    });
    this.slider.slideTo(selectedIndex);
  }

  onSlideChanged(slider) {
    console.log('Slide changed');
    const currentSlide = this.slides[slider.activeIndex];
    this.selectedSegment = currentSlide.id;
  }

}

any hack to get the active segment visible on the screen, when the segment if off screen .

I am having same issue @CliffyMk.

@aarjithn thanks for sharing your code, did you try to make segment part scrollable with a slider?

working fine, thanks for your help

@nuruddinXbadawi to make the slider scrollable you have to set "height" to auto

ion-slides {
    height: auto !important;
}

Also to update on this, the event on the slider has to be named ionSlideDidChange instead ionSlideDidChange

<ion-slides #mySlider (ionSlideDidChange)="onSlideChanged($event)">

and I also had to change slider.activeIndex into slider.getActiveIndex()

onSlideChanged(slider) {
    console.log('Slide changed');
    const currentSlide = this.slides[slider.activeIndex];
    this.selectedSegment = currentSlide.id;
  }

How to make the first segment activated by default when the segment buttons is dynamic? ngModel is only working if the data is static which already hardcoded.

Unfortunately this is broken in ionic 5 and IonSlides.