CODEWITHSUNDEEP
ionic-frameworkionic4
Darshana
Darshana

Reputation: 650

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

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 ?

Upvotes: 3

Views: 9884

Answers (7)

Sachin Chillal
Sachin Chillal

Reputation: 531

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>

Upvotes: 0

Blo
Blo

Reputation: 11978

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.

Upvotes: 3

Jhonnathan Henriquez
Jhonnathan Henriquez

Reputation: 21

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

Upvotes: 1

Yogesh Kumar
Yogesh Kumar

Reputation: 1046

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

Upvotes: 1

pondol
pondol

Reputation: 939

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

Upvotes: 3

Sergey Rudenko
Sergey Rudenko

Reputation: 9227

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

Upvotes: 1

phunder
phunder

Reputation: 1703

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.

Upvotes: 3

Related Questions