Angular Material Stepper

The Code Points September 04, 2022 0

In this article, we will learn about the stepper in Angular Material. Stepper is an Angular Material component that divides information into multiple parts to produce a workflow that resembles a wizard.

There are two different kinds of steppers: horizontal and vertical.

So, let's start with the implementation

First, we need to create a new angular application using the following command in the terminal.

ng new Angular-Material-Stepper

Now, we need to install the Material UI framework using the following command in the terminal.

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

Now, add the MatStepperModule  and BrowserAnimationsModule module in the app.module.ts file using the following code.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    MatStepperModule,
	BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

You must add the following CSS line to the index.html head section if you want to use Material Icons.

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

Now, add the following code under the app.component.html file.

<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>

Now, run the application using the ng serve command into the terminal and see the browser screen we are able to use stepper and open specific step.

Conclusion

In this article, we learned how to add stepper of Angular Material into the application using the Angular Material UI framework.

I hope this article helps you and you will like it.👍

Please give your valuable feedback and comments or suggestion in the comment section

If you have any doubt or confusion then free to ask in the comment section.