How to getActiveIndex() not working in RC0

Ionic Framework ionic-v3
1

i used getActiveIndex() for the slides in my previous project in beta version but its not working now…can anyone suggest any solution for it?

2

Just tested in debug in chrome, getActiveIndex() seems to work for me (Ionic2 RC.0)

Have you some code to show?

3

@ViewChild('mySlider') slider: Slides;
first here i defined slider.

then i am using getActievIndex to get the active index

    let currentIndex = this.slider.getActiveIndex() - 1;

but when i click on this page containing the above line it shows error. =>
EXCEPTION: Error in ./ImageViewer class ImageViewer - inline template:22:51 caused by: Cannot read property ‘activeIndex’ of undefined

ORIGINAL EXCEPTION: Cannot read property ‘activeIndex’ of undefined

can you see a solution now?

4

Could you check if in your html page if your slider’s name is “mySlider”? If not it could explain why it’s not found

Should look like following:

<ion-slides #mySlider>
5

yes it is there in the html code

6

then I’ve got the same code here and it works :frowning:

maybe where do you try to access the current index?

constructor, ionViewWillEnter, etc.? Have you try moving that code to see if then the slider is initialized?

7

i am calling it inside a function onSlideChange()

can you please peovide your code here. just this part using getActiveIndex()

8

do we need to import or anything to use this?

9

Can’t provide my code but could show you these part, I think I didn’t do something different than you

Declaration:

 @ViewChild('newAdSlider') slider: Slides;

I do :

this.slider.getActiveIndex()

In different parts, like:

onSlideChanged() {
    this.slider.getActiveIndex();
}

in html I’ve got

<ion-slides #newAdSlider [options]="newAdSlideOptions" (ionDidChange)="onSlideChanged()">
  <ion-slide>
  <!-- stuffs -->
</ion-slide>
</ion-slides>

and newAdSlideOptions is declared as

newAdSlideOptions: any;

and build in my constructor

this.newAdSlideOptions = {
        initialSlide: 0,
        loop: false,
        pager: false,
        onlyExternal: true
    };

I don’t do any particular import, not that I know at least

do you notice any differences?

1 Like
10

Did you solve this? I am having exact same issue. Slider runs fine if I remove getActiveIndex() from code. And getSlider() to get the Slider says undefined?!?

Here is my example…

FILE: home.ts (the important bits)

import { ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';
export class HomePage {
  @ViewChild('mySlider') slider: Slides;
  sliderOptions: any;
  constructor( ) {
    this.sliderOptions = {
      initialSlide: 0,
      loop: true,
      speed: 300, 
      pager: false
     };
    }
    onSliderChange() {
      let slider_real = this.slider.getSlider();
      console.log(slider_real); // returns undefined??
      // let currentIndex = this.slider.getActiveIndex(); 
      // console.log("currentIndex is",currentIndex); // return error on getActiveIndex
    }

FILE: home.html
<ion-slides #mySlider [options]="sliderOptions" (ionDidChange)="onSliderChange()">

11

onSliderChange() seems to want to run on page load even if user has not changed slider yet so only fix really I could find is to check if slider is undefined and bypass code if so…

// when user changes slide
onSliderChange() {
    console.log('onSliderChange');
    let slider_real = this.slider.getSlider();
        if(typeof slider_real!=='undefined'){
            this.slider_index = this.slider.getActiveIndex();
            console.log(slider_real);
            console.log("slider_real index is",slider_real.activeIndex);
            console.log("slider_index is",this.slider_index);
        }else{
            this.slider_index = 0; // TODO get from user storage and set it?
        }
12

no i had to remove it from my app. Do you found any solution ?

13

My fix/comment is above… Can only get index AFTER page is loaded on next users event like a swipe. I tried different lifecycle events. Still didn’t work so my solution above is closest fix i could find. http://ionicframework.com/docs/v2/api/navigation/NavController/#lifecycle-events

14

I’m agree with @kylefromohio, since the slider in the typescript class is initialized with ViewChild, it gonna be active as soon as the content is loaded.

I just had to add a method from my html page to detect which slide is active and I was facing errors too.

But I found a solution :slight_smile:

getActiveIndex could be use as soon as your slide object is initialized and as soon as that object as a valid swiper child.

So in my case my solution look like following:

@ViewChild('mySlider') slider: Slides;

...

isNotFirstSlide():boolean {
    return this.slider != null && this.slider !== 'undefined' && this.slider.slider != null && this.slider.slider !== 'undefined' && this.slider.getActiveIndex() > 0;
}

Hope it gonna help you too

P.S.: Note, if you access getActiveIndex after the page is loaded, like in a method which is not called from your html page, the check of slider != null and slider.slider != null is not mandatory since your slider in such case gonna be loaded

1 Like
15

put the code in try catch block like this,

onSlideChanged() {
     try{
      let currentIndex = this.slider.getActiveIndex();
      console.log("Current index is", currentIndex);
     }catch(e){
       console.log("onSlideChanged ex", e)
     }
  }

i had the same issue after this it worked

1 Like