title: Trying to think about how to build a multi step form in angular 2
body: <p>I am trying to build a small, 3 step form.  It would be something similar to this:</p>
  
  <p><a href="https://i.stack.imgur.com/BysIo.jpg"><img src="https://i.stack.imgur.com/BysIo.jpg" alt="enter image description here"></a></p>
  
  <p>The way I did this in react was by using redux to track form completion and rendering the form body markup based on the step number (0, 1, 2).  </p>
  
  <p>In angular 2, what would be a good way to do this?  Here's what I am attempting at the moment, and I'm still working on it.  Is my approach fine?  Is there a better way to do it?  </p>
  
  <p>I have a parent component <code>&lt;app-form&gt;</code> and I will be nesting inside it <code>&lt;app-form-header&gt;</code> and <code>&lt;app-form-body&gt;</code>.</p>
  
  <pre><code>&lt;app-form&gt;
    &lt;app-header [step]="step"&gt;&lt;/app-header&gt;
    &lt;app-body [formData]="formData"&gt;&lt;/app-body&gt;
  &lt;/app-form&gt;
  </code></pre>
  
  <p>In <code>&lt;app-form&gt;</code> component I have a <code>step: number</code> and <code>formData: Array&lt;FormData&gt;</code>.  The step is just a index for each object in formData.  This will be passed down to the header.  formData will be responsible the form data from user.  Each time the form input is valid, user can click Next to execute nextStep() to increment the index.  Each step has an associated template markup. </p>
  
  <p>Is there a better way to do something like this? </p>