0

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?
Scott Deerwester
  • 3,503
  • 4
  • 33
  • 56

1 Answers1

1

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>
Radke
  • 26
  • 2