Introduction

In this article, we will learn about Angular Material’s Stepper. Stepper is an Angular Material component that is used to create a wizard-like workflow by distributing content into several steps.
There are two types of stepper either horizontally or vertically.
  1. mat-horizontal-stepper
  2. mat-vertical-stepper

Let’s create a new application in the visual studio code. To create a new app execute below command in terminal.

ng new AngularMaterialStepper

Install Angular Material

Execute below commands to install the Material UI framework in the Angular Project. so we can able to use Material’s Stepper Component in our project.

npm install --save @angular/material @angular/cdk @angular/animations

If its return any error or found any vulnerabilities just follow below command

ng update @angular/cli @angular/core --allow-dirty

After updating the cli and core follow below command to run the application.
ng serve

You can see below the output after successfully run the application.

Enable Animations for Material components

To enable this open app.module.ts file and copy below lines in it.

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { MatStepperModule } from '@angular/material';

@NgModule({
imports: [BrowserAnimationsModule,MatStepperModule]
})

Import any theme from below in the “styles.css” file:

~@angular/material/prebuilt-themes/deeppurple-amber.css
~@angular/material/prebuilt-themes/pink-bluegrey.css
~@angular/material/prebuilt-themes/purple-green.css
~@angular/material/prebuilt-themes/indigo-pink.css";

Here, I’m going to use the “purple-green” theme, so import in the “styles.css” file as below.

@import "~@angular/material/prebuilt-themes/purple-green.css";

If you want to use Material Icons you need to add below CSS line in the index.html head section.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Open the “app.component.html” file and copy-paste below content there.

<h1>Horizontal Stepper</h1>
<mat-horizontal-stepper>

  <mat-step label="Step 1">
    Step 1 content
    <p>optional buttons</p>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
  </div>
  </mat-step>

  <mat-step label="Step 2">
    Step 2 content    
  </mat-step>

  <mat-step label="Step 3">
    Step 3 content   
  </mat-step>

</mat-horizontal-stepper>

<hr />

<h1>Vertical Stepper</h1>
<mat-vertical-stepper>

  <mat-step label="Step 1">
    Step 1 content
  </mat-step>

  <mat-step label="Step 2">
    Step 2 content
  </mat-step>

  <mat-step label="Step 3">
    Step 3 content
  </mat-step>

</mat-vertical-stepper>

Save and execute the “ng serve” command in terminal to see below output.