IONIC 4 : getActiveIndex() is not working in ion-slides

#1

Using IONIC 4 ion-slides, I am trying to get currently clicked silde index using getActiveIndex() as below which it is not working.

    <ion-slides #testSlider (ionSlideTap)="getIndex()">
       <ion-slide>....</ion-slide>
    </ion-slides>


    @ViewChild('testSlider') slider: ElementRef;  // first way
    
    getIndex() {
         this.slider.nativeElement.getActiveIndex();
    }


    @ViewChild('testSlider') slider: Slider; //second way
    
    getIndex() {
         this.slider.getActiveIndex();
    }

And the another way as below which is also not working:

    <ion-slides #testSlider (ionSlideTap)="getIndex(testSlider)">
     <ion-slide>....</ion-slide>
    </ion-slides>
    
    
    getIndex(testSlider) {
         testSlider.getActiveIndex();
    }

Can anyone please suggest me how can I get active index or currently clicked slide index in IONIC 4 ?

#2

Hi -

You can try this -

<ion-slides (ionSlideDidChange)="slideChanged()" ></ion-slides>

In .ts file

@ViewChild('slides') slides;

slideChanged() { 
this.slides.nativeElement.getActiveIndex().then(index => {
   console.log(index);
});
}

Hope this help you!

#3

or

getIndex(testSlider: IonSlides) {

let p1 = testSlider.getActiveIndex();

p1.then(value =&gt; console.log(value));

}

I was a little bit confused as I saw in ide that this is a promise. If I read the doc, I am not really expecting to get a promise. https://beta.ionicframework.com/docs/api/slides/#methods
The doc is imho really confusing and bad. If I compare for example to material.io, which is also not a hit (because It has only trivial examples), but it is much more better, because it works.

Best regards, anna-liebt

#4

I think documentation has to be updated! Moreover the has the base of http://idangero.us/swiper/

Thanks
Roopesh

#6

Thanks for your reply.

@roopeshc Here ionSlideDidChange is not catching the click (It is not calling the slideChanged() method).

@anna_liebt

How can I use IonSlides as datatype. Is there any way to import it?

#7

It’s not IonSlides instead Slides -

import { Slides } from '@ionic/angular';

#8

Anybody was able to get this working in ionic 4.0.0-rc.0 ???

#9

Hello,

yes you import it in your ts and can use it

import {IonSlides} from '@ionic/angular';

At one of the last betas, I hope I am not to wrong it was renamed.

"@ionic/angular": "4.0.0-rc.0",

Best regards, anna-liebt

1 Like
#10

Hello,

Here ionSlideDidChange is not catching the click (It is not calling the slideChanged() method)

Maybe you should show relared code.

Best regards, anna-liebt