title: Using separate components in a linear mat-horizontal-stepper
body: <p>In Angular, is it possible to have a linear stepper where the individual steps are separate components? For example:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-horizontal-stepper [linear]="isLinear"&gt;
      &lt;mat-step [stepControl]="firstFormGroup" label="Some Form"&gt;
          &lt;first-component&gt;&lt;/first-component&gt;
      &lt;/mat-step&gt;
      &lt;mat-step [stepControl]="secondFormGroup" label="Another Form"&gt;
          &lt;second-component&gt;&lt;/second-component&gt;
      &lt;/mat-step&gt;
      &lt;mat-step [stepControl]="thirdFormGroup" label="Review"&gt;
          &lt;third-component&gt;&lt;/third-component&gt;
      &lt;/mat-step&gt;
  &lt;/mat-horizontal-stepper&gt;
  </code></pre>
  
  <p>When I try this, I receive the following error upon hitting the <code>matStepperNext</code> button:</p>
  
  <p><code>TypeError: Cannot read property 'invalid' of undefined</code>.</p>