ipsos-components/src/demo-app/stepper/stepper-demo.html

Material Design components for Angular

<mat-checkbox [(ngModel)]="isNonLinear">Disable linear mode</mat-checkbox>

<h3>Linear Vertical Stepper Demo using a single form</h3>
<form [formGroup]="formGroup">
  <mat-vertical-stepper formArrayName="formArray" [linear]="!isNonLinear">
    <mat-step formGroupName="0" [stepControl]="formArray?.get([0])">
      <ng-template matStepLabel>Fill out your name</ng-template>
      <mat-form-field>
        <input matInput placeholder="First Name" formControlName="firstNameFormCtrl" required>
        <mat-error>This field is required</mat-error>
      </mat-form-field>

      <mat-form-field>
        <input matInput placeholder="Last Name" formControlName="lastNameFormCtrl" required>
        <mat-error>This field is required</mat-error>
      </mat-form-field>
      <div>
        <button mat-button matStepperNext type="button">Next</button>
      </div>
    </mat-step>

    <mat-step formGroupName="1" [stepControl]="formArray?.get([1])" optional>
      <ng-template matStepLabel>
        <div>Fill out your email address</div>
      </ng-template>
      <mat-form-field>
        <input matInput placeholder="Email address" formControlName="emailFormCtrl">
        <mat-error>The input is invalid.</mat-error>
      </mat-form-field>
      <div>
        <button mat-button matStepperPrevious type="button">Back</button>
        <button mat-button matStepperNext type="button">Next</button>
      </div>
    </mat-step>

    <mat-step>
      <ng-template matStepLabel>Confirm your information</ng-template>
      Everything seems correct.
      <div>
        <button mat-button>Done</button>
      </div>
    </mat-step>
  </mat-vertical-stepper>
</form>

<h3>Linear Horizontal Stepper Demo using a different form for each step</h3>
<mat-horizontal-stepper [linear]="!isNonLinear">
  <mat-step [stepControl]="nameFormGroup">
    <form [formGroup]="nameFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
      <mat-form-field>
        <input matInput placeholder="First Name" formControlName="firstNameCtrl" required>
        <mat-error>This field is required</mat-error>
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Last Name" formControlName="lastNameCtrl" required>
        <mat-error>This field is required</mat-error>
      </mat-form-field>
      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>

  <mat-step [stepControl]="emailFormGroup" optional>
    <form [formGroup]="emailFormGroup">
      <ng-template matStepLabel>Fill out your email address</ng-template>
      <mat-form-field>
        <input matInput placeholder="Email address" formControlName="emailCtrl">
        <mat-error>The input is invalid</mat-error>
      </mat-form-field>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>

  <mat-step>
    <form>
      <ng-template matStepLabel>Confirm your information</ng-template>
      Everything seems correct.
      <div>
        <button mat-button>Done</button>
      </div>
    </form>
  </mat-step>
</mat-horizontal-stepper>

<h3>Vertical Stepper Demo</h3>
<mat-checkbox [(ngModel)]="isNonEditable">Make steps non-editable</mat-checkbox>
<mat-vertical-stepper>
  <mat-step [editable]="!isNonEditable">
    <ng-template matStepLabel>Fill out your name</ng-template>
    <mat-form-field>
      <input matInput placeholder="First Name">
    </mat-form-field>

    <mat-form-field>
      <input matInput placeholder="Last Name">
    </mat-form-field>
    <div>
      <button mat-button matStepperNext type="button">Next</button>
    </div>
  </mat-step>

  <mat-step [editable]="!isNonEditable">
    <ng-template matStepLabel>
      <div>Fill out your phone number</div>
    </ng-template>
    <mat-form-field>
      <input matInput placeholder="Phone number">
    </mat-form-field>
    <div>
      <button mat-button matStepperPrevious type="button">Back</button>
      <button mat-button matStepperNext type="button">Next</button>
    </div>
  </mat-step>

  <mat-step [editable]="!isNonEditable">
    <ng-template matStepLabel>
      <div>Fill out your address</div>
    </ng-template>
    <mat-form-field>
      <input matInput placeholder="Address">
    </mat-form-field>
    <div>
      <button mat-button matStepperPrevious type="button">Back</button>
      <button mat-button matStepperNext type="button">Next</button>
    </div>
  </mat-step>

  <mat-step>
    <ng-template matStepLabel>Confirm your information</ng-template>
    Everything seems correct.
    <div>
      <button mat-button>Done</button>
    </div>
  </mat-step>
</mat-vertical-stepper>

<h3>Horizontal Stepper Demo with Text Label</h3>
<mat-horizontal-stepper>
  <mat-step label="Fill out your name">
    <mat-form-field>
      <input matInput placeholder="First Name">
    </mat-form-field>

    <mat-form-field>
      <input matInput placeholder="Last Name">
    </mat-form-field>
    <div>
      <button mat-button matStepperNext type="button">Next</button>
    </div>
  </mat-step>

  <mat-step label="Fill out your phone number">
    <mat-form-field>
      <input matInput placeholder="Phone number">
    </mat-form-field>
    <div>
      <button mat-button matStepperPrevious type="button">Back</button>
      <button mat-button matStepperNext type="button">Next</button>
    </div>
  </mat-step>

  <mat-step label="Fill out your address">
    <mat-form-field>
      <input matInput placeholder="Address">
    </mat-form-field>
    <div>
      <button mat-button matStepperPrevious type="button">Back</button>
      <button mat-button matStepperNext type="button">Next</button>
    </div>
  </mat-step>

  <mat-step label="Confirm your information">
    Everything seems correct.
    <div>
      <button mat-button>Done</button>
    </div>
  </mat-step>
</mat-horizontal-stepper>

<h3>Horizontal Stepper Demo with Templated Label</h3>
<mat-horizontal-stepper>
  <mat-step *ngFor="let step of steps">
    <ng-template matStepLabel>{{step.label}}</ng-template>
    <mat-form-field>
      <input matInput placeholder="Answer" [(ngModel)]="step.content">
    </mat-form-field>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>
</mat-horizontal-stepper>

<h3>Stepper with autosize textarea</h3>
<mat-horizontal-stepper>
  <mat-step label="Step 1">
    <mat-form-field>
      <textarea matInput placeholder="Autosize textarea" matTextareaAutosize>This is an autosize textarea, it should adjust to the size of its content.</textarea>
    </mat-form-field>
  </mat-step>
</mat-horizontal-stepper>