Building registration flow with multiple screens- ionic4

Hello, I’m doing my first ionic app and I want to make registration flow with multiple screens (like steps of registration) and I’m wondering if there’s a way to do that with one page, not making new page for every single screen. Please help, because I’m struck. I read the whole internet searching for my answer, but with no specific result. I mean something like https://ionicframework.com/docs/api/nav, but every screen is different and I need it to navigate forward by clicking a button.

It may sound really dumb, but I really have no clue how to do it :smiley:

Yes, thanks. I already started with slides, but I got the problem that I need the slides to change on clicked button ‘Next’ and I have this function

 swipeNext(){
    this.slides.lockSwipes(false);
    this.slides.slideNext();
    this.slides.lockSwipes(true);
  }

but it doesn’t work. So now I’m reading all over the internet again to find this solution :smiley:

First you have to initialize the slide in order only swipe programmatically. Then in the function just use slideNext method and nothing else.

This is my code in the html file.

<ion-content fullscreen padding scroll-y="false">
  <ion-slides pager="false" #mySlider>

This is my code in the .ts file

export class RegisterPage implements OnInit {
  @ViewChild('mySlider', { read: true, static: false }) slides: IonSlides;


  swipeNext(){
    this.slides.slideNext();
  }
  constructor() { }

  ngOnInit() {
  }

}

No, read the docs. You can use something like this

<ion-slides pager="true" [options]="slideOpts" #slider>
      <ion-slide>
        <ion-button color="primary" (click)="swipeNext()">Next</ion-button>
      </ion-slide>
      <ion-slide>
        <h1>Slide 2</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 3</h1>
      </ion-slide>
    </ion-slides>
import { Component, ViewChild } from '@angular/core';

export class Page {
    @ViewChild('slider') slider: IonSlides;

    public slideOpts = {
        'allowTouchMove': false,
        'autoplay': false
    };

    swipeNext() {
        this.slide.slideNext();
    }
}

I use a stepcounter with ngif on ng-container for each screen

I’m curious about the rationale for preferring this over simply having different pages for each step of the process.

I am sometimes too lazy to create new pages, but u r right if slides are not what u r looking for. Then new pages is better

The only thing I could think of is a desire to share controller properties in a state where it doesn’t make any sense to farm them out to a service yet. I guess I could see that argument, but it arguably makes for harder-to-read code having one page do the work of several, because if you take that logic to the extreme, one would only have one page for the entire app.

1 Like

It’s just a design question. Is a big form easier for the user to process by scrolling down the form, or by completing the form in page-size bits?

Most big forms go for the latter.

Designing it in one procedure/page means it is only one form to process, one set of data to manage. I think it is better for everyone?

1 Like

The problem is that this.slides.slideNext(); doesn’t work properly.

I just really didn’t want to make a single screen for every step of the registration flow, because they’re like 6 or 7? :smiley: and I will probably never use them again somewhere else. So that’s why I think it’s unnecessary to do it. Slides do the job for me, but this.slides.slideNext(); isn’t really working, so maybe I’d have to switch it to pages. IDK