<mat-horizontal-stepper linear="false" #stepper>
  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
      <mat-form-field>
        <input matInput placeholder="Last name, First name"
               formControlName="firstCtrl" required />
      </mat-form-field>
      <div class="button-container">
        <button mat-flat-button
                matStepperNext
                color="primary">
          Next
        </button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>Fill out your address</ng-template>
      <mat-form-field>
        <input matInput placeholder="Address" formControlName="secondCtrl"
               required />
      </mat-form-field>
      <div class="button-container">
        <button mat-stroked-button
                matStepperPrevious
                color="black">
          Back
        </button>
        <button mat-flat-button
                matStepperNext
                color="primary">
          Next
        </button>
      </div>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    <div class="button-container">
      <button mat-stroked-button
              matStepperPrevious
              color="black">
        Back
      </button>
      <button mat-flat-button
              (click)="stepper.reset()"
              color="primary">
        Reset
      </button>
    </div>
  </mat-step>
</mat-vertical-stepper>