How To Create Angular Material’s Stepper

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.

mat-horizontal-stepper
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.

Faisal Pathan

Faisal Pathan is a founder of TheCodeHubs, .NET Project Manager/Team Leader, and C# Corner MVP. He has extensive experience with designing and developing enterprise-scale applications. He has good skills in ASP.NET C#, ASP.NET Core, ASP.NET MVC, AngularJS, Angular, React, NodeJS, Amazon S3, Web API, EPPlus, Amazon MWS, eBay Integration, SQL, Entity Framework, JavaScript, eCommerce Integration like Walmart, Tanga, Newegg, Group-on Store, etc. and Windows services.