Ion Sliders instance Members are always undefined

Hey there,

I’m currently trying to develop a fullscreen Slider where I can see the current Slide Index and the length of the Slide itself, so “Picture 3 of 13” is written in the navbar.

HTML template:
<ion-header> <ion-toolbar> <ion-title> {{current}} von {{all}} </ion-title> <ion-buttons start> <button (click)="dismiss()"> <span primary showWhen="ios">Abbrechen</span> <ion-icon name="md-close" showWhen="android,windows"></ion-icon> </button> </ion-buttons> </ion-toolbar> </ion-header> <ion-content> <ion-slides #bilderslider [options]="mySlideOptions" > <ion-slide *ngFor="let bild of restbilder"> <img src="{bild.bildpfad}}"> </ion-slide> </ion-slides> </ion-content>

import {Component, ViewChild, AfterViewInit} from '@angular/core'; import {NavController, NavParams, Slides,ViewController} from 'ionic-angular'; @Component({ templateUrl: 'build/pages/inserat/fullscreen_bilder/fullscreen_bilder.html', }) export class FullScreen { @ViewChild('bilderslider') slider: any; bild1:any; bild2:any; bild3:any; restbilder:any; all:any; current:any; id:any; constructor(public viewCtrl: ViewController,private navController: NavController,private navParams: NavParams) { this.bild1 = navParams.get('bild1'); this.bild2 = navParams.get('bild2'); this.bild3 = navParams.get('bild3'); this.restbilder = navParams.get('restbilder'); = navParams.get('idInserat'); } dismiss() { this.viewCtrl.dismiss(); } mySlideOptions = { loop: true }; ngAfterViewInit() { console.log('on after view init', this.slider); this.current = this.slider.getActiveIndex(); console.log("Current index is", this.current); this.all = this.slider.length(); } }
console.log this.slider does indeed output the slider instance, but every Method fails with undefined is not an object.

What’s wrong? :frowning:

I think ngAfterViewInit is too early, and the slider has not been fully constructed yet. Can you try substituting ionViewDidEnter?

1 Like

Awesome that worked like a charm!

Problem now:
I want to update this.current when the user swipes to the next image. I’m using (ionDidChange)=“onSlideChanged()” for that. But ionDidChange is fired prior ionViewDidEnter, so slider is again undefined.

onSlideChanged() {

Only thing I can think of is to wrap that assignment in a check like if (this.slider.slider), so it will only try if the slider is fully built.

Hi There,

I am having a same problem, could you please help me, I didnt understand “wrap that assignment in a check like if…” I tried putting the If condition in onSlideChange with console.log message, which works but when I am trying to get the length or getActiveIndex of slider, i got undefined message error. I am not sure how to resolve this. It works find with ionDrag but doesnt work with other two options. Any help would be appreciated.


I don’t know how else to put it.

if (this.slider.slider) {
  // now we know this should work
  this.current = this.slider.getActiveIndex();

Yeah, I tried with the above approach but the problem still exists. It works fine with ionDrag or if I hard code all the slides :frowning:

Found the workaround, might not be the right way but it did work for me. I ended up putting the condition in this way

console.log("Current length is " + this.slider.length());


1 Like

Awesome. Worked again!

I maybe found a bug. I got 3 picture variables + an array of pictures:

<ion-slides #bilderslider [options]="mySlideOptions" (ionDidChange)="onSlideChanged()"> <ion-slide *ngIf="bild1"> <img src="file=inseratedata/{{id}}/{{bild1}}"> </ion-slide> <ion-slide *ngIf="bild2"> <img src="file=inseratedata/{{id}}/{{bild2}}"> </ion-slide> <ion-slide *ngIf="bild3"> <img src="file=inseratedata/{{id}}/{{bild3}}"> </ion-slide> <ion-slide *ngFor="let bild of restbilder"> <img src="file=inseratedata/{{id}}/{{bild.bildpfad}}"> </ion-slide> </ion-slides>

The Array has 2 elements, so in sum I’ve should got 5 pictures. The Pager element creates 5 dots, but the slider.length() function returns seven?

That is interesting, it should return 5. Would you be able to share your code ?

How could I do that?

you can use plnker