service-provider-app/src/app/preparer/add/add-preparer.component.html

<div class="preparer-container">
    <mat-stepper orientation="vertical" [linear]="true" (selectionChange)="onStepChange($event)"
        [selectedIndex]="currentStep">

        <!-- Basic Details Step -->
        <mat-step [completed]="basicDetailsCompleted">
            <ng-template matStepLabel>Basic Details</ng-template>

            <app-basic-details [isEditMode]="isEditMode" (clientidCreated)="onBasicDetailsSaved($event)"
                (showLocations)="onShowLocations($event)"(locationAdded)="onLocationAdded($event)">
            </app-basic-details>
        </mat-step>

        <!-- Location Step -->
        <mat-step [completed]="locationCompleted" [editable]="!!clientid && basicDetailsCompleted" *ngIf="showLocation">
            <ng-template matStepLabel>Locations</ng-template>

            <app-location *ngIf="clientid" [clientid]="clientid" (hasLocations)="onLocationSaved($event)"
                (updated)="onLocationUpdated($event)" [userPreferences]="userPreferences"
                [refreshLocationData]="refreshLocationData">
            </app-location>
        </mat-step>

        <!-- Contacts Step -->
        <mat-step [completed]="contactsCompleted" [editable]="!!clientid && locationCompleted">
            <ng-template matStepLabel>Contacts</ng-template>

            <app-contacts *ngIf="clientid" [clientid]="clientid" (hasContacts)="onContactsSaved($event)"
                [userPreferences]="userPreferences" [refreshLocationData]="refreshLocationData">
            </app-contacts>
        </mat-step>

    </mat-stepper>
</div>