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.
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.