title: different component for each angular material stepper step via *ngFor
body: <p>I can't figure out how loop through a list of steps for the stepper and use a different component for each one using <code>*ngFor</code>.</p>
  
  <p>I'm currently doing this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-horizontal-stepper
    [linear]="true"
    [labelPosition]="labelPosition"
    (selectionChange)="onSelectionChange($event)"
    [selectedIndex]="currentStep"
    #stepper&gt;
  
    &lt;mat-step [completed]="steps[0].completed" [label]="steps[0].label"&gt;
      &lt;app-my-component-0 [someInput0]="someInput0" (someOutput0)="onSomeOutput0($event)" *ngIf="currentStep === 0"&gt;&lt;/app-my-component-0&gt;
    &lt;/mat-step&gt;
    &lt;mat-step [completed]="steps[1].completed" [label]="steps[1].label"&gt;
      &lt;app-my-component-1 [someInput1]="someInput1" (someOutput1)="onSomeOutput1($event)" *ngIf="currentStep === 1"&gt;&lt;/app-my-component-1&gt;
    &lt;/mat-step&gt;
    &lt;mat-step [completed]="steps[2].completed" [label]="steps[2].label"&gt;
      &lt;app-my-component-2 [someInput2]="someInput2" (someOutput2)="onSomeOutput2($event)" *ngIf="currentStep === 2"&gt;&lt;/app-my-component-2&gt;
    &lt;/mat-step&gt;
  
  &lt;/mat-horizontal-stepper&gt;
  </code></pre>
  
  <p>Is there a more elegant way? I think I need to do something with <code>ngTemplate</code> but I'm not familiar enough to get it working.</p>