Similar to what we learned in the Accordions and expansion panels section, we will need to add a wrapper, and a <mat-horizontal-stepper> directive, and inside that, we will create <mat-step> directives. For each step that we want to add, we will need to create a new <mat-step> directive for our application. We can also create a vertical stepper. For that, the wrapper class we will use is the <mat-vertical-stepper> directive. Take a look at the following code; we are creating a horizontal stepper:

<mat-card class="z-depth" >
<mat-card-title>Material Stepper</mat-card-title>
<mat-card-content>
<mat-horizontal-stepper [linear]="isLinear" #stepper>
<mat-step label="Personal Details">
Step #1
</mat-step>
<mat-step label="Professional Details">
Step #2
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
You are now done.
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="stepper.reset()">Reset</button>
</div>
</mat-step>
</mat-horizontal-stepper>
</mat-card-content>
</mat-card>

In the preceding code, we created a horizontal stepper with three steps. To define the stepper, we have used <mat-horizontal-stepper>, and for defining the actual steps, we have used the <mat-step> directive. The output of the preceding code is given as follows: