stepper content projection with for loop

Question

I want to create a reusable stepper component which makes use of Angular's Content projection with a for loop. i.e. I want to use <ng-content> with a selector in a for loop. I want to be abble to add a for loop in the stepper's body (in html) and then it should step through each of the for loop's html content.

My code:

Stepper:

html

<div class="stepper-container flex">
    <div class="flex-xy-center">
        <a class="stepper-button stepper-button-left" (click)="onPrevious()">&#10094;</a>
    </div>
    <!-- Back Button -->
    <div>
        <ng-content select="[step-item]"></ng-content>
    </div>

    <!-- Front button -->
    <div class="flex-xy-center">
        <a class="stepper-button stepper-button-right" (click)="onNext()">&#10095;</a>
    </div>
</div>

ts

export class AppUIStepperComponent implements AfterViewInit {

    @Input() allowStep: boolean = true;     // allows the user to always step
    @Input() nextStepAllowed: boolean = true;   // TODO: maybe change this, this will be parent telling this component that next step can be allowed
    @ViewChild('step') stepRef: ElementRef; // represents one step/slide
    stepElement!: HTMLElement | null;

    constructor(
    ) {}

    ngAfterViewInit(): void {
        this.stepElement = this.stepRef?.nativeElement;
    }

    onNext() {

    }

    onPrevious() {

    }

}

Hosting component

<app-ui-stepper>
        <div class="flex">
            <div *ngFor="let step of stepperArray" style="border: 1px orange solid">
                <div step-item>
                    <div>{{step}}</div>
                    <div>blah blah</div>
                    <div style="background-color: blueviolet; height: 100px; width: 30px;"></div>
                </div>
            </div>
        </div>
    </app-ui-stepper>

stepperArray is an array, it can be any array.

Output:

Ass you can see there is no content in the stepper between the 2 buttons as shows in the image. Each for loop's div should be displayed as a step inside the stepper. I do not require logic of how the stepper itself works (e.g. button next logic). I just want to know how do I implement the <ng-content> in the for loop correctly?