Nested Slides, get active id?

Hi There,

iam currently building some an app with nested slides. The user can swipe vertical and horizontal.

Works really good so far, but when i change to the second slide i cant acces the active index.

This is my template:

<ion-slides #exerciseSlider [options]="exerciseSliderOptions" (ionDidChange)="onExerciseSlideChanged()">
    <ion-slide *ngFor="let exercise of workout.exercises; let i = index;">

        <ion-slides #setSlider [options]="setSliderOptions" (ionDidChange)="onSetSlideChanged()">

            <template ngFor let-set [ngForOf]="exercise.sets" let-setNumber="index">

                <ion-slide []="exercise.sets[setNumber].duration">



And here is my code:

@ViewChild('exerciseSlider') exerciseSlider:Slides; // Main Slider
@ViewChild('setSlider') setSlider:Slides; // Nested Slider -> there are 3 or more nested slides for each main slide

onExerciseSlideChanged() {
    let currentIndex = this.exerciseSlider.getActiveIndex();
    console.log("Current index is", currentIndex);

onSetSlideChanged() {
    let that = this;
    let exerciseIndex = this.exerciseSlider.getActiveIndex();
    let setSliderIndex = this.setSlider.getActiveIndex();

So each exercise have X sets.

I think i have to create the “@ViewChild(‘setSlider’) setSlider:Slides;” dynamically.

Is this right?

The question is: How?

1 Like

You got any solutions for this? I’m trying to do the same.