How to getActiveIndex() not working in RC0

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?

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

Have you some code to show?

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

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>

yes it is there in the html code

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?

i am calling it inside a function onSlideChange()

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

do we need to import or anything to use this?

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


 @ViewChild('newAdSlider') slider: Slides;

I do :


In different parts, like:

onSlideChanged() {

in html I’ve got

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

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

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()">

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() {
    let slider_real = this.slider.getSlider();
        if(typeof slider_real!=='undefined'){
            this.slider_index = this.slider.getActiveIndex();
            console.log("slider_real index is",slider_real.activeIndex);
            console.log("slider_index is",this.slider_index);
            this.slider_index = 0; // TODO get from user storage and set it?

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

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.

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

put the code in try catch block like this,

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

i had the same issue after this it worked

1 Like