Angular Material Stepper and Step separately components

I want to separate my steps from stepper, because I don’t know how many steps I have in each page.

Page:

<test-stepper>   <test-step></test-step>   <test-step></test-step> </test-stepper> 

Stepper:

<mat-horizontal-stepper>   <ng-content select="test-step"></ng-content> </mat-horizontal-stepper> 

Step:

<mat-step>   <ng-template matStepLabel>Label</ng-template>    <div>     <button mat-button matStepperNext>Next</button>   </div>  </mat-step> 

I did this, but it not show any step.

Thanks all 😀