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;
  }

}

how to use ion-list instead of title??

{{ slide.title }}

Hello, how can I print something in the item from a json file?

I'm using api data for tab header and its not showing current tab underline.
and also onClick on tab it also not working.

select tab is also not working when using api data.

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.