Search code examples
angular-material-stepper

Does Angular allow nested steppers?


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:

Stepper rendering

So..

  1. Am I doing something wrong here?
  2. Is there a better way to accomplish what I'm after?

Solution

  • 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>