ionic-framework: ion-slides reference broken: this.slides is undefined

Ionic version: (check one with “x”) [ ] 1.x [ ] 2.x [x] 3.x

I’m submitting a … (check one with “x”) [x] bug report [ ] feature request [ ] support request

Current behavior: I receive the error this.slides is undefined following the API documentation: https://ionicframework.com/docs/api/components/slides/Slides/. The reference using @ViewChild(Slides) slides: Slides; doesn’t seem to work with Ionic 3.2.1. It was working with Ionic 2 and stopped working after an upgrade to Ionic 3.

Expected behavior: As in Ionic 2, this.slides allows to access the activeIndex with this.slides.getActiveIndex().

Steps to reproduce: Follow the tutorial given bellow: https://ionicframework.com/docs/api/components/slides/Slides/

Related code:

    @ViewChild(Slides) slides: Slides;

...

  public slidesChanged() {
    let index = (this.slides.getActiveIndex();
    console.log(index);
  }

    <ion-slides (ionSlideDidChange)="slidesChanged()" loop="false" pager="true">
...

Other information: Was working like a charm before upgrading to Ionic 3. Is the doc still up to date ?

Ionic info:

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.2.1
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.7
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.8
Node Version: v7.10.0
Xcode version: Not installed

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 24 (5 by maintainers)

Most upvoted comments

Hi all,

I had a similar problem, this.slides was undefined and for some reason a timeout of 500 milliseconds worked for me.

<ion-slides #slides pager>...

 @ViewChild('slides') slides: Slides;

    ionViewDidLoad() {
        setTimeout(() => {
            this.slides.lockSwipes(true);
        }, 500);      
    }

Hope it helps.

L96Github on Jul 3, 2017

Works for me, though I do it slightly different than you.

I do: <ion-slides pager #slides (ionSlideDidChange)="slideChanged()">

then reference it by doing: @ViewChild('slides') slides: Slides;

davec21 on May 19, 2017

If you have any condition wrapping your <ion-slides> such as *ngIf I would suggest adding a setter for the ion-slides, this way it is independent of the lifecycle hooks and the slides reference is always valid:

    slidesRef: Slides;
    @ViewChild('slides') set content(ionSlides: Slides) {
        if (ionSlides){
            this.slidesRef = ionSlides;
            //Here you can set any properties you would like
            this.slidesRef.autoHeight = true;
        }
    }

Artfloriani on Feb 6, 2018

Hi @brandyscarney ,

I used your plunkr to reproduce the issue by just adding the following line console.log(this.slides.length()); Link to plunkr: http://plnkr.co/edit/vmNVs28bOXmtie8ifXty?p=preview

martinhanke on Jul 3, 2017

Hello @Gp2mv3 , this is actually a docs issue as the docs are not super clear here. As @davec21 points out, you have to add a template variable to the ion-slides component for ViewChild to know what component to get a reference too. Because of this I am going to mark this as a docs issue.

jgw96 on May 19, 2017