Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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;
}
}
@flint002

This comment has been minimized.

Copy link

@flint002 flint002 commented Mar 6, 2017

work slide with segment but myscrool list not working

@johnny5015

This comment has been minimized.

Copy link

@johnny5015 johnny5015 commented Mar 9, 2017

<ion-slides #mySlider (ionSlideDidChange)="onSlideChanged($event)">
const currentSlide = this.slides[slider.getActiveIndex()];
fixed bugs!

@Dilshadkhan56

This comment has been minimized.

Copy link

@Dilshadkhan56 Dilshadkhan56 commented Mar 30, 2017

how to use ion-list instead of title??

{{ slide.title }}

@Jhan321

This comment has been minimized.

Copy link

@Jhan321 Jhan321 commented May 23, 2017

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

@vinay13

This comment has been minimized.

Copy link

@vinay13 vinay13 commented Jun 27, 2017

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

@vinay13

This comment has been minimized.

Copy link

@vinay13 vinay13 commented Jun 27, 2017

select tab is also not working when using api data.

@CliffyMk

This comment has been minimized.

Copy link

@CliffyMk CliffyMk commented Aug 8, 2017

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

@dilip90

This comment has been minimized.

Copy link

@dilip90 dilip90 commented Oct 24, 2017

I am having same issue @CliffyMk.

@NurdinDev

This comment has been minimized.

Copy link

@NurdinDev NurdinDev commented Jan 9, 2018

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

@gokujy

This comment has been minimized.

Copy link

@gokujy gokujy commented Mar 7, 2018

working fine, thanks for your help

@guillermogfer

This comment has been minimized.

Copy link

@guillermogfer guillermogfer commented Mar 12, 2018

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

This comment has been minimized.

Copy link

@ManigandanRaamanathan ManigandanRaamanathan commented Jun 28, 2018

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.

@LucasTsolakian

This comment has been minimized.

Copy link

@LucasTsolakian LucasTsolakian commented Mar 14, 2020

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