How to add Mat-Stepper in Angular

Let’s look at how to add a mat-stepper to an angular application.

Firstly, use the following command to add Angular material to your project.

ng add @angular/material

Go to app.module.ts file and import MatStepperModule as follows

import {MatStepperModule} from '@angular/material/stepper';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatStepperModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

app.component.html:

The stepper was in horizontal direction.

<mat-horizontal-stepper linear>
  <mat-step label="Details" completed="false">
    <p>Add Details</p>
    <div>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>
  <mat-step label="Billing address" optional>
    <p>Billing address</p>
    <div>
      <button mat-button matStepperPrevious>Back</button>
    </div>
  </mat-step>

</mat-horizontal-stepper>

In the above code,

If the completed attribute was false then the first step should be completed, and then only we can go to next step. If the completed attribute was true then user can switch to next step whenever they want.

Add optional attribute is used if the user wants to fill that step or not, so that this step was optional.

matStepperNext and matStepperPrevious is used to go to the next step or previous step.

The stepper was in vertical direction.

Just you need to change the mat-vertical stepper

<mat-vertical-stepper linear>
  <mat-step label="Details" completed="false">
    <p>Add Details</p>
    <div>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>
  <mat-step label="Billing address" optional>
    <p>Billing address</p>
    <div>
      <button mat-button matStepperPrevious>Back</button>
    </div>
  </mat-step>

</mat-vertical-stepper>

This is how user can add mat-stepper in Angular.

Thank you!

Leave a Reply