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

Question

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


 ....



@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:


 ....



getIndex(testSlider) {
     testSlider.getActiveIndex();
}

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

user_714713 · Answer

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.

user_5846213 · Answer

in template

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);
    });
}

user_2668136 · Answer

According to the documentation, getActiveIndex() returns a Promise.
So by using ionSlideTap:

...

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.

user_4005366 · Answer

UPDATED:

I think I made a few mistakes, here is working example (Ionic 3). Please make sure you are using $event.

Template file:

Now in TS file:

getIndex(event) {
  console.log(event.clickedIndex);
}

Try the above approach?

Here is working stackblitz: https://stackblitz.com/edit/ionic-ssvout

user_10778485 · Answer

for ionic 4

*.html

...

*. ts

 ...
 @ViewChild('slides', { static: false }) slides: IonSlides;
 ...
 slideChanged(slides: IonSlides) {
   slides.getActiveIndex().then((index: number) => {
    console.log(index);
    this.currentIndex = index;
   });
 }

user_6376796 · Answer

1)Assign id to the respective like #slides

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)
   });
 }

user_15505755 · Answer

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

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

7 Answers