Import the ArchwizardModule

Import stepper into your Angular project by adding the ArchwizardModule to your module declaration as follows:

---

                                    
import {MatStepperModule} from '@angular/material/stepper';

@NgModule({
  imports: [
  MatStepperModule
  ],
})
export class Module { }
							
						

How to use the wizard

---

                         	
<mat-horizontal-stepper [linear]="isLinear" #stepper>
    <mat-step [stepControl]="firstFormGroup">
        <form [formGroup]="firstFormGroup">
            <ng-template matStepLabel>Fill out your name </ng-template>
            <mat-form-field class="example-full-width" appearance="outline">
                <mat-label>First Name </mat-label>
                <input matInput formControlName="firstName" required>
                <mat-icon matSuffix>face </mat-icon>
            </mat-form-field>
            <mat-form-field class="example-full-width" appearance="outline">
                <mat-label>Last Name </mat-label>
                <input matInput formControlName="lastName" required>
                <mat-icon matSuffix>face </mat-icon>
            </mat-form-field>
            <div>
                <button mat-raised-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 class="example-full-width" appearance="outline">
                <mat-label>Address </mat-label>
                <textarea matInput formControlName="address"
                    placeholder="Ex. 1 Main St, New York, NY" required> </textarea>
            </mat-form-field>
            <div>
                <button mat-raised-button matStepperPrevious color="warn"
                    class="mr-2">Back </button>
                <button mat-raised-button matStepperNext color="primary">Next </button>
            </div>
        </form>
    </mat-step>
    <mat-step>
        <ng-template matStepLabel>Done </ng-template>
        <p>You are now done. </p>
        <div>
            <button mat-raised-button matStepperPrevious color="warn" class="mr-2">Back </button>
            <button mat-raised-button color="primary" (click)="stepper.reset()">Reset </button>
        </div>
    </mat-step>
</mat-horizontal-stepper>
							
						

Type	URL
Angular Material Page	https://material.angular.io/components/stepper/api