I built an ionic5 application that utilizes a loop to add ion-slides whose content are different radio groups whose contents are pulled from an array. My problem is when I try to use slideNext or slideTo to switch slides, it fails to work. I can only get it to work after refreshing the browser and doesnt work at all when I build an android app and test.
The code I am trying is:
<ion-slides #quizSlider>
<ion-slide *ngFor="let question of questions;let i = index">
<ion-list lines="none">
<ion-radio-group [(ngModel)]="singleanswer">
<ion-item *ngFor="let answer of question.answers">
<ion-label>{{answer}}</ion-label>
<ion-radio slot="start" value="{{answer}}">
</ion-radio>
</ion-item>
</ion-radio-group>
<div fxLayout="row" fxLayoutAlign="center" >
<ion-button color="primary" (click)="checkUserAnswers(i)">Check</ion-button>
</div>
</ion-list>
</ion-slide>
</ion-slides>
And .ts code:
import { IonSlides } from '@ionic/angular';
@ViewChild('quizSlider') quizSlider: IonSlides;
export class Quiz {
questions: Question[];
constructor() {}
checkUserAnswers(questionNo)
{
if(this.questions.length == questionNo + 1)
{
this.router.navigate(['complete']);
}
else
{
console.log('test');
//this.quizSlider.slideNext();
//this.quizSlider.lockSwipes(false);
this.quizSlider.slideNext();
//this.quizSlider.lockSwipes(true);
//let currentIndex = this.quizSlider.getActiveIndex().then( (val) => console.log(val) );
//console.log('Current Slide: ' + currentIndex);
//this.quizSlider.slideTo(questionNo + 1);
}
}
}
Not sure if its related but the ionic environment I am using is:
Ionic CLI : 6.11.8
Ionic Framework : @ionic/angular 5.0.5
@angular-devkit/build-angular : 0.900.7
@angular-devkit/schematics : 9.0.7
@angular/cli : 9.0.7
@ionic/angular-toolkit : 2.2.0
UPDATE I have attempted using swipe and I realized that (like the case of using button event) the slide change only works after the page is refreshed. I have tried downgrading to ionic4 but the problem has persisted