Label position of an Angular Material nested Stepper gets overwritten

Question

Looking at a nested Angular Material Stepper, the label position in the child stepper (labelPosition="end") gets overwritten by the label position in the parent stepper (labelPosition="bottom"), as in the following example:

<mat-horizontal-stepper labelPosition="bottom" linear #stepper>
    <mat-step [stepControl]="firstFormGroup" [editable]="isEditable">
        <ng-template matStepLabel>ParentLabel</ng-template>
        <mat-horizontal-stepper labelPosition="end" linear #stepperChild>
            <mat-step [stepControl]="firstFormGroup" [editable]="isEditable">
                <form [formGroup]="firstFormGroup">
                    <ng-template matStepLabel>ChildLabel</ng-template>
                    <mat-form-field>
                        <mat-label>Name</mat-label>
                        <input matInput
                          formControlName="firstCtrl"
                          placeholder="Last name, First name"
                          required
                        />
                    </mat-form-field>
                </form>
            </mat-step>
        </mat-horizontal-stepper>
    </mat-step>
</mat-horizontal-stepper>

Here's a Stackblitz showcasing the issue. Is there a way around this?

Answer 1

if you dig around the Angular Material source code (currently 11.2) a little, you can find out how the classes are applied internally depending of the labelPosition.

material/stepper/stepper.ts

'[class.mat-stepper-label-position-end]': 'labelPosition == "end"',
'[class.mat-stepper-label-position-bottom]': 'labelPosition == "bottom"',

Digging through the stylesheet (material/stepper/stepper.scss) you can see that label-position-end does not actually have any styles applied to it. label-position-bottom however has a few style properties, which are applied to all its children.

This might be a bug in Angular Material itself, as the styles are not scoped to accommodate nested steppers. It might also be that nested steppers are unintended.

Open an issue in angular/components to get in contact with the developers. Or create a PR.