Nested Slides, get active id?

Ionic Framework ionic-v3
1

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 [attr.data-timer]="exercise.sets[setNumber].duration">
                .....
                </ion-slide>

            </template>

        </ion-slides>
    </ion-slide>
</ion-slides>

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() {
    console.log(this.setSlider);
    let currentIndex = this.exerciseSlider.getActiveIndex();
    console.log("Current index is", currentIndex);
}

onSetSlideChanged() {
    window.clearInterval(this.interval);
    let that = this;
    let exerciseIndex = this.exerciseSlider.getActiveIndex();
    let setSliderIndex = this.setSlider.getActiveIndex();
    console.log(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
2

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