Skip to content

Instantly share code, notes, and snippets.

@aarjithn
Last active March 14, 2020 11:07
Show Gist options
  • Save aarjithn/d282b019f6046f0de2f0ded623554313 to your computer and use it in GitHub Desktop.
Save aarjithn/d282b019f6046f0de2f0ded623554313 to your computer and use it in GitHub Desktop.
Sliding Segments Ionic v2
<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>
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;
}
}
@LucasTsolakian
Copy link

Unfortunately this is broken in ionic 5 and IonSlides.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment