I'm trying to nest Angular Material steppers, to better model business logic (forms and other step contents elided for brevity):
<mat-vertical-stepper [linear]="true" #main_stepper>
<mat-step state="quote">
<ng-template matStepLabel>
<strong>What do you need?</strong>
</ng-template>
<mat-vertical-stepper
[linear]="true"
#quote_stepper>
<mat-step state="how">
<ng-template matStepLabel>
<strong>How?</strong>
</ng-template>
</mat-step>
<mat-step state="where">
<ng-template matStepLabel>
<strong>Where?</strong>
</ng-template>
</mat-step>
<mat-step state="what">
<ng-template matStepLabel>
<strong>What?</strong>
</ng-template>
</mat-step>
<mat-step state="who">
<ng-template matStepLabel>
<strong>Who?</strong>
</ng-template>
</mat-step>
</mat-vertical-stepper>
</mat-step>
<mat-step state="choose">
<ng-template matStepLabel>
<strong>Which offer would you like?</strong>
</ng-template>
</mat-step>
<mat-step state="review">
<ng-template matStepLabel>
<strong>Review and submit your chosen offer</strong>
</ng-template>
</mat-step>
</mat-vertical-stepper>
The steps for the nested stepper are being rendered in both the inner and the outer steppers:
So..
Indeed creating nested steppers makes some troubles, but the solution is to put nested stepper as additional component:
<mat-vertical-stepper>
<mat-step>
<ng-template matStepLabel>Step 1</ng-template>
<p>...</p>
</mat-step>
<mat-step>
<ng-template matStepLabel>Step 2</ng-template>
<p>...</p>
</mat-step>
<mat-step>
<ng-template matStepLabel>Step 3</ng-template>
<app-nested-stepper></app-nested-stepper>
</mat-step>
<mat-step>
<ng-template matStepLabel>Step 4</ng-template>
<p>...</p>
</mat-step>
</mat-vertical-stepper>