Model / Slider issue


#1

Hi There,

I am new to ionic and am trying to setup a modal that transitions to the correct slide based on buttons from the previous view. I am recieving the following error:

slideTo TypeError: undefined is not an object

There was a related post but the fix did not seem to work for me:

Below is my function for opening the model / slide transition. Can someone please lend a hand?

export class LegsPage {
  
  @ViewChild(Slides) slides: Slides;

  constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController) {
  }

 
  ionViewDidLoad() {
    console.log('ionViewDidLoad LegsPage');
  }

  
  public openModal(index) {
    var modalPage = this.modalCtrl.create('LegModelPage'); 
    modalPage.present();
    setTimeout(() => { this.slides.slideTo(index, 1000); }, 1000);
  }

  public closeModal() {

  }

}

The load is occurring more slowly now that the time out function has been added but the error im getting is still the same. Thanks in advance.


#2

Hi Friends,

This really was due to my lack of understanding of how ionic works. I did figure it out in the end. I incorrectly thought that the modal would be a part of the current view, but in fact, it was its own view. For those of us that arn’t quite so bright, I simply had to pass the slide index over, from my initial view to my modal view:

public openModal(index) {

    console.log(index);
    var modalPage = this.modalCtrl.create('LegModelPage', {index: index}); 
    modalPage.present();
    console.log(index);
  }

Then in my modal page, I picked up the data I had passed using navParams. I then threw my code in the ionViewDidLoad() function. Not sure if this is best practice or not but it did work:

ionViewDidLoad() {
    console.log('ionViewDidLoad LegModelPage');
    console.log(this.navParams.get('index'));
    var index = this.navParams.get('index');
    setTimeout(() => { this.slides.slideTo(index, 0); }, 100);
  }

And voila, finally it slides to the correct slide.