Angular 16 Custom Stepper

Question

I made a custom Angular stepper component :

I would display a thin horizontal bar that starts just before step-content (for example witdh 80px) that contains the step muméro and ends just after derier-content (for example witdh 80px) I also want that if I am on step 1, the bar just before changes color When I am in step 2, the bar between step 1 and 2 changes color When I’m at the last step, the bar just before the last step and the bar just changes color

    <ng-container *ngFor="let step of steps; let i = index">
        <div class="step-information">
            {{step.label}}
            <div class="stepper-container">
                <div class="step-content step-active" *ngIf="i === selectedIndex; else noCurrentStep">
                    {{i + 1}}
                </div>
        
                <ng-template #noCurrentStep>
                    <div class="step-content step-complet" *ngIf="i < selectedIndex; else nextStep">
                        {{i + 1}}
                    </div>
        
                    <ng-template #nextStep>
                        <div class="step-content step-default">
                            {{i + 1}}
                        </div>
                    </ng-template>
                </ng-template>
            </div>
        </div>
    </ng-container>
</div>

<ng-container *ngIf="selected" [ngTemplateOutlet]="selected.content"></ng-container>```


.stepper-progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    height: 80px;
}


.stepper-container {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
}

.step-content{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.step-default {
    width: 32px;
    height: 32px;
    padding: 9px 11px 11px;
    border: 4px solid #f5f6fa;
    box-shadow: inset 0px 0px 0px 1px $grey-80;
    box-sizing: border-box;
    background-color: #f5f6fa;
    border-radius: 48px;
    font-family: 'Century Gothic', sans-serif;
    font-size: 17px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.41;
    letter-spacing: normal;
    text-align: center;
    color: $grey-80;
}

.step-active{
    width: 40px;
    height: 40px;
    margin: 0px;
    padding: 13px 15px 15px;
    border-radius: 48px;
    background-color: $secondary-green;
    font-family: 'Century Gothic', sans-serif;
    font-size: 24px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: center;
    color: $blue-primary;
}

.step-complet{
    width: 40px;
    height: 40px;
    margin: 0px;
    padding: 13px 15px 15px;
    border-radius: 48px;
    background-color: $blue-primary;
    font-family: 'Century Gothic', sans-serif;
    font-size: 24px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: center;
    color: $white;
}

.step-information{
    display: flex;
    flex-direction: column;
    align-items: center;
}```