How to keep a value of a property every time I am on a ion-slide and keeping it the same when moving between ion-slides

[alex123-dot]

I am using ionic slides and I want to allow the user to slide only when clicking "next" or "back" and to be able to click "next" only when a radio option is selected. Otherwise, the "next" button to be disabled if there is no selection.

I managed to do this as below using the property radioButtonSelection;, but when I am going back because there is no new event on the page the property radioButtonSelection; doesn't take the value assigned previously and the slides are blocked. It shows is undefined thus the slides are blocked. However, if I go back I select an option, deselect and select again it's working because there is a new change and the property gets a new value. Any help would be amazing. Thanks a lot!

This is my HTML

<ion-content>
      <ion-grid>
        <ion-row>
          <ion-col>
            <ion-slides [options]="sliderConfig" #quizSlider (ionChange)="populateQuizQuestions($event)">
              <ion-slide>
                <ion-list>
                  <ion-list-header>
                    <ion-label>{{predefinedQuizQuestions[0].text}}</ion-label>
                  </ion-list-header>
                  <ion-radio-group [(ngModel)]="selectedConcernAnswer" allow-empty-selection>
                    <ion-item *ngFor="let question of predefinedQuizQuestions">
                      <ion-label>{{predefinedQuizQuestions[0].asnwers[0]}}
                      </ion-label>
                      <ion-radio slot="end" checked value="v1"></ion-radio>
                    </ion-item>

                    <ion-item>
                      <ion-label>{{predefinedQuizQuestions[0].asnwers[1]}}
                      </ion-label>
                      <ion-radio slot="end" checked value="v2"></ion-radio>
                    </ion-item>

                    <ion-item>
                      <ion-label>{{predefinedQuizQuestions[0].asnwers[2]}}
                      </ion-label>
                      <ion-radio slot="end" checked value="v3"></ion-radio>
                    </ion-item>

                    <ion-item>
                      <ion-label>{{predefinedQuizQuestions[0].asnwers[3]}}
                      </ion-label>
                      <ion-radio slot="end" checked value="v4"></ion-radio>
                    </ion-item>

                    <ion-item>
                      <ion-label>{{predefinedQuizQuestions[0].asnwers[4]}}
                      </ion-label>
                      <ion-radio slot="end" checked value="v5"></ion-radio>
                    </ion-item>
                  </ion-radio-group>
                </ion-list>
              </ion-slide>
              <!-- Radio Single -->
              <ion-slide *ngFor="let questions of dynamicDataBaseQuizQuestions">
                <ion-list *ngIf="questions.type ==='radio'">
                  <ion-list-header>
                    <ion-label>{{questions.text}}</ion-label>
                  </ion-list-header>
                  <ion-radio-group allow-empty-selection>
                    <ion-item *ngFor="let ans of questions.answers">
                      <ion-label> {{ans}}</ion-label>
                      <ion-radio slot="end" checked></ion-radio>
                    </ion-item>
                  </ion-radio-group>
                </ion-list>

                <!-- Radio Multiple Selection -->
                <ion-list *ngIf="questions.type ==='radioMultiple'">
                  <ion-list-header>
                    <ion-label>{{questions.text}}</ion-label>
                  </ion-list-header>
                  <ion-radio-group allow-empty-selection *ngFor="let ans of questions.answers">
                    <ion-item>
                      <ion-label> {{ans}}</ion-label>
                      <ion-radio slot="end" checked></ion-radio>
                    </ion-item>
                  </ion-radio-group>
                </ion-list>

                <!-- Search and Select -->
              </ion-slide>
            </ion-slides>
          </ion-col>
        </ion-row>
      </ion-grid>
      <ion-button (click)="swipeBack()">
        <</ion-button>
          <ion-button (click)="swipeNext()" #nextQuestion>Next</ion-button>
    </ion-content>

This is my JS

import {
  Component,
  OnInit,
  ViewChild
} from "@angular/core";
import {
  IonSlides
} from "@ionic/angular";

@Component({
  selector: "app-home",
  templateUrl: "home.page.html",
  styleUrls: ["home.page.scss"],
})
export class HomePage implements OnInit {
  @ViewChild("quizSlider", {
    static: true
  }) slides: IonSlides;

  clickedIndex = 0;
  sliderConfig = {
    slidesPerView: 1,
  };

  constructor() {}

  ngOnInit() {}

  ngAfterViewInit() {
    this.slides.lockSwipes(true);
  }

  predefinedQuizQuestions = [{
    text: "Q1",
    type: "radio",
    topic: "hC",
    asnwers: [
      "v1",
      "v2",
      "v3",
      "v4",
      "v5",
    ],
  }, ];

  dataBaseQuizQuestions = [{
      text: "Q2",
      type: "radio",
      topic: "v1",
      answers: ["Yes", "No"],
    },
    {
      text: "Q3",
      type: "radio",
      topic: "v1",
      answers: ["Yes", "No"],
    },
    {
      text: "Q4",
      type: "radioMultiple",
      topic: "v1",
      answers: ["K", "V", "VG"],
    },
  ];

  selectedConcernAnswer;
  dynamicDataBaseQuizQuestions = [];
  radioButtonSelection;

  populateQuizQuestions(e) {
    if (this.selectedConcernAnswer === "v1")
      for (var i = 0; i < this.dataBaseQuizQuestions.length; i++) {
        if (
          this.dataBaseQuizQuestions[i].topic === this.selectedConcernAnswer
        ) {
          this.dynamicDataBaseQuizQuestions.push(this.dataBaseQuizQuestions[i]);
        }
      }
    this.radioButtonSelection = e.detail.value;
  }

  swipeNext() {
    console.log(this.radioButtonSelection);
    if (this.radioButtonSelection !== undefined) {
      this.slides.lockSwipes(false);
      this.slides.slideNext();
    } else if (this.radioButtonSelection === undefined) {
      this.slides.lockSwipes(true);
    }
  }
  swipeBack() {
    this.radioButtonSelection;
    this.slides.slidePrev();
  }
}