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

Question

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 ?

Answer 1

I had the same problem, but managed to solve it as follows:
export class SomePage implements OnInit {
...
currentIndex:Number = 0;
...
getSlideIndex(){
this.slides.getActiveIndex().then(
(index)=>{
this.currentIndex = index;
});
}
...
this.getSlideIndex();
console.log(this.currentIndex);
Note that although it seems to work, I suspect that because the value is changes inside promise, it will only return the correct value if it has not recently changed. I thus intend to update this with a wait implemented to counter this.

Answer 2

in template
<ion-slides pager="true" (ionSlideDidChange)="slideChanged($event)" #slides>
</ion-slides>
in component
import { IonSlides } from '#ionic/angular';
#ViewChild('slides', {static: true}) slides: IonSlides;
slideChanged(e: any) {
this.slides.getActiveIndex().then((index: number) => {
console.log(index);
});
}

Answer 3

According to the documentation, getActiveIndex() returns a Promise<number>.
So by using ionSlideTap:
<ion-slides (ionSlideTap)="onSlideTapped($event)">
...
</ion-slides>
I found two ways to do it:
As phunder suggests, you can use then() to retrieve its value. I also did it with async/await:
async onSlideTapped(event: any) {
const index: number = await event.target.getActiveIndex();
console.log(index);
}
Or you can use the swiper object:
onSlideTapped(event: any) {
console.log(event.target.swiper.clickedIndex);
}
Therefore, you don't have to listen for every changes or to import the IonSlides in your component.

Answer 4

UPDATED:
I think I made a few mistakes, here is working example (Ionic 3). Please make sure you are using $event.
Template file:
<ion-slides (ionSlideTap)="getIndex($event)">
<ion-slide>1</ion-slide>
</ion-slides>
Now in TS file:
getIndex(event) {
console.log(event.clickedIndex);
}
Try the above approach?
Here is working stackblitz: https://stackblitz.com/edit/ionic-ssvout

Answer 5

1)Assign id to the respective like #slides
<div>
<ion-slides #slide (ionSlideDidChange)="SlideChanges(slide)">
</ion-slides>
</div>
2) import IonSlides in your.ts page/component
import { IonSlides } from '#ionic/angular';
3). Use method
SlideChanges(slide: IonSlides) {
slide.getActiveIndex().then((index: number) => {
this.yourSlideIndex= index;
alert(this.yourSlideIndex)
});
}

Answer 6

for ionic 4
*.html
<ion-slides #slides (ionSlideDidChange)="slideChanged(slides)">
...
</ion-slides>
*. ts
...
#ViewChild('slides', { static: false }) slides: IonSlides;
...
slideChanged(slides: IonSlides) {
slides.getActiveIndex().then((index: number) => {
console.log(index);
this.currentIndex = index;
});
}

Answer 7

Yes, It's working...!
// Typescript
import { IonSlides } from '#ionic/angular';
// in Component Class
export class AppComponent implements OnInit {
#ViewChild('contentSlider') contentSlider: IonSlides;
constructor(){}
ngOnInit() {}
do_getActiveSlide(e: any) {
this.contentSlider.getActiveIndex().then((index: number) => {
console.log("Current active slide index", index);
});
}
}
div {
width: 100%;
height: 5em;
color: gold;
background-color: #333;
margin: 1.5em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/#ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/#ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#ionic/core/css/ionic.bundle.css"/>
<ion-slides pager="true" (ionSlideDidChange)="do_getActiveSlide($event)" #contentSlider>
<ion-slide>
<div>1</div>
</ion-slide>
<ion-slide>
<div>2</div>
</ion-slide>
<ion-slide>
<div>3</div>
</ion-slide>
</ion-slides>