Dynamically create a mat-step outside of mat-horizontal-stepper

Question

I am trying to create a dynamic stepper form in angular material. I have defined my main components as such

my-stepper.component.ts

<mat-horizontal-stepper [linear]="true" #stepper>
    <ng-content></ng-content>
</mat-horizontal-stepper>

in another file I defined my steps so I can generate these with an *ngFor

my-stepper-step.component.ts

<mat-step>
  <ng-content></ng-content>
</mat-step>

Now I want to generate the stepper by creating another component and loading this

<my-stepper>
  <my-stepper-step *ngFor="let num of nums">
    {{ nums }}
  </my-stepper-step>
</my-stepper>

This however gives the error NullInjectorError: No provider for MatStepper!. I believe this has to do with mat-step needing to be enclosed in a mat-horizontal-stepper, and this actually is done via ng-content but not directly. Is there a way to load mat-steps outside of the stepper?

Thanks in advance

Answer 1

https://github.com/angular/components/blob/master/src/material/stepper/stepper.ts#L158

mat-stepper must wrap mat-step directly:

<mat-stepper orientation="vertical" [linear]="true" #stepper>
  <mat-step *ngFor="let num of nums">
    {{ num }}
  </mat-step>
</mat-stepper>