[Ionic v4| Slides getActiveIndex() is not a function

[peterpeterparker]

Ionic Info @ionic/angular: "4.0.0-alpha.11"

Describe the Bug When I try to get the active index of a slider in Ionic v4 I face the following error at runtime

 ERROR TypeError: this.slider.getActiveIndex is not a function

Related Code

HTML

 <ion-slides #firstSlider pager="false">
     <ion-slide>....</ion-slide>
  </ion-slides>

TS

 @ViewChild('firstSlider') slider: Slides;

 isNotFirstSlide(): boolean {
    return this.slider && this.slider.getActiveIndex() > 0;
}

[PRModi]

Hi, Try @ViewChild(Slides) slider: Slides; instead of @ViewChild('firstSlider') slider: Slides;

[peterpeterparker]

Ok so here's the solution:

In v3 I would do

<ion-slides #firstSlider pager="false">
 <ion-slide>....</ion-slide>
</ion-slides>

and get the element and activeIndex like

 @ViewChild('firstSlider') slider: Slides;

 isNotFirstSlide(): boolean {
     return this.slider && this.slider.getActiveIndex() > 0;
}

which doesn't work in v4 because the ViewChild reference isn't the same anymore, therefore the typescript code should be migrated like the following

@ViewChild('firstSlider') slider: ElementRef;

isNotFirstSlide(): boolean {
     return this.slider && this.slider.nativeElement && this.slider.nativeElement.getActiveIndex() > 0;
}

p.s: @brandyscarney I allow myself to ping you just in case you think this should be documented in the breaking changes list

[iureguimaraes]

Hi, peterpeterparker! I think we cannot access the getActiveIndex method yet.

I used:

<ion-slides pager="true" [options]="slideOpts" #myslides>

In my .ts:

@ViewChild('myslides') slider: ElementRef;

ngAfterViewInit() {
  console.log(this.slider.nativeElement.getActiveIndex());
}

And get an undefined message in my console. Do you have any suggestion?

[peterpeterparker]

@iurevguimaraes have you try with v4.0.0-beta2?

[iureguimaraes]

It's fixed in v.4.0.0-beta.2! Thank you @peterpeterparker !

[ehdwns980416]

@peterpeterparker I tried with v.4.0.0-beta.7. But same problem..

[peterpeterparker]

@ehdwns980416 open a support post on the Ionic forum, post your code and link it here, it should just work fine

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.