Trying to think about how to build a multi step form in angular 2

Question

I am trying to build a small, 3 step form. It would be something similar to this:

The way I did this in react was by using redux to track form completion and r

Answer 1

If you want to keep things extensible, you could try something like this:

<sign-up>
  <create-account 
    [model]="model" 
    [hidden]="model.createAccount.finished">
  </create-account>
  <social-profiles 
    [model]="model" 
    [hidden]="model.socialProfiles.finished">
  </social-profiles>
  <personal-details 
    [model]="model" 
    [hidden]="model.personalDetails.finished">
  </personal-details>
 </sign-up>

 export class SignUpVm {
   createAccount: CreateAccountVm; //Contains your fields & finished bool
   socialProfiles: SocialProfilesVm; //Contains your fields & finished bool
   personalDetails: PersonalDetailsVm; //Contains your fields & finished bool
   //Store index here if you want, although I don't think you need it
 }

 @Component({})
 export class SignUp {
   model = new SignUpVm(); //from sign_up_vm.ts (e.g)
 }

 //Copy this for personalDetails & createAccount
 @Component({})
 export class SocialProfiles {
   @Input() model: SignUpVm;
 }

Answer 2

don't overdo it, if it is a simple form you don't need to use the router or a service to pass data between the steps.

something like this will do:

<div class="nav">
</div>

<div id="step1" *ngIf="step === 1">
<form></form>
</div>

<div id="step2" *ngIf="step === 2">
<form></form>
</div>

<div id="step3" *ngIf="step === 3">
<form></form>
</div>

It's still a small template, and you kan keep all of the form and all the data in one component, and if you want to you can replace the ngIf with something that switches css-classes on the step1,2,3 -divs and animate them as the user moves to the next step