How to automatically generate dynamic content using angular directives

Question

I need your help. I have two components, a parent and a child. In the middle of a child component, I'm trying to automatically generate blocks depending on an input parameter. The fact is that I need to automatically generate content depending on the generated content using ng-container and ng-template. Below in the code I'm trying to create content using directives, but I don't have the content visible, but the array length is present. What could be wrong? Thank you very much

ChildComponent

export class ChildComponent {

   @ContentChildren('stepDescription') stepDescriptions: QueryList<TemplateRef<void>>;
   @Input() numberOfSteps: number;
   @Input() number: number;

   get stepsArray(): number[] {
      return [...Array(this.numberOfSteps).keys()].map(i => i + 1);
   }
}

html

<div class="step" *ngFor="let step of stepsArray">
<ng-container *ngIf="step > number; else done">
    <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect [class.completed]="step <= number" width="36" height="36" rx="18" fill="#F3F3F3"/>
        <text class="body-3" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="16" fill="black">{{ step }}</text>
    </svg>
    <ng-container *ngIf="stepDescriptions.length > 0">
        <ng-template [ngTemplateOutlet]="stepDescriptions[step - 1]"></ng-template>
    </ng-container>
</ng-container>
</div>

ParentComponent.html

<child [numberOfSteps]="6" [number]="number">
<ng-template #stepDescriptions1>
    <div> content one </div>
</ng-template>
<ng-template #stepDescriptions2>
    <div> content two </div>
</ng-template>
<ng-template #stepDescriptions3>
    <div> content three </div>
</ng-template>
</child>