Create a new ion-slide on click

Question

I am creating a multi-step form in ionic for submitting information about medication.

Previously it was one big form, but I want it to look a little less cluttered and long. I'm using ion-slides to model the form, and I want to be able to make one of the slides available only if a button is clicked. How can I do this? This is my code so far:

<ion-content>
    <ion-slides>
        <ion-slide>
            <h4>Tell us about your medication</h4>
        </ion-slide>
        <ion-slide>
            <form id="addMed" #form="ngForm" (ngSubmit)="addMed(form)">
                       ```
                       some code
                        ```
            </form>
        </ion-slide>
        <ion-slide>
            <form>
                       ```
                       some code
                        ```
                <ion-button expand="full" (click)="toggleRX()">This is a prescription medication</ion-button>
                    <div *ngIf=isRX>
                        <h4>Prescription Information</h4>

                       ```
                       some code
                        ```
                    </div>
            </form>
        </ion-slide>
    </ion-slides>

I want the *ngIf div to be its own slide, but only accessible if the "this is a prescription medication" button is pressed. Is there a way to do this?

(I also want to know more about ion-slides with forms if anyone has any resources on that but that's just a bonus)

Answer 1

We can lock swiping to next slide unless a our prescribed button is pressed, upon pressing, we will slide to whichever slide# which we want - and once the slide is transitioned, we lock the slide-ability again (so that the user doesn't go to it themselves - the only way for them to go to another slide is via a button only)

Check the Home tab in the demo on stackblitz here

home.ts reads like:

import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Slides } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild(Slides) slides: Slides;

  slideOpts;
  constructor(public navCtrl: NavController) {
    this.slideOpts = {
      effect: 'flip'
    };
  }

  ionViewDidEnter() {
    //lock manual swipe for main slider
    this.slides.lockSwipeToNext(true);
    this.slides.lockSwipeToPrev(true);
  }

  slideToSlide() {
    if (this.slides.getActiveIndex() + 1 === this.slides.length()) {
      this.slides.slideTo(0);
    } else {
      this.slides.lockSwipeToNext(false);
      this.slides.slideTo(this.slides.getActiveIndex() + 1);
      this.slides.lockSwipeToNext(true);

    }
  }

}

home.html is:

<ion-header>
    <ion-navbar>
        <ion-title>Home</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-slides>
        <ion-slide>
            <h4>This is the first slide</h4>
            <button type="button" (click)="slideToSlide()">Next</button>
        </ion-slide>
        <ion-slide>
            <h4>This is the second slide</h4>
      <button type="button" (click)="slideToSlide()">Next</button>
        </ion-slide>
        <ion-slide>
            <h4>This is the third slide</h4>
      <button type="button" (click)="slideToSlide()">Next</button>
        </ion-slide>
    </ion-slides>
</ion-content>