Angular Material Stepper

Updated March 28, 2023

Introduction to Angular Material Stepper

Angular material stepper is providing the wizard which was used to flow the content into steps which is logical. We can build the material stepper on the stepper foundation which was responsible for the logic which drives the workflow which was stepped. Stepper of material extends the stepper of CDK and the design style of material design. It is very useful and important in AngularJS.

What is Angular Material Stepper?

• Basically material is providing a number of components which was used to develop web-based applications. We can use steeper in web-based applications.
• We can switch between both variants by using the attribute name as orientation. Both the variant of material stepper will work the same only difference is the stepper orientation.
• Basically, the material stepper is responsible for the CDK stepper foundation logic which was driving the workflow of the stepper. The angular material stepper will extend the design style of the material and CDK stepper.
• We are using <mat-stepper> attribute to use the material stopper in our AngularJS project.

Angular Material Stepper Variants

It is implemented into the application by adding the component of mat-step.

As we know that material stepper variants are divided into two types. The two types of angular material stepper variants available in angularJS are as follows:

• Mat horizontal stepper
• Mat vertical stepper

Basically, the material stepper is divided into two types vertical and horizontal.

Below is the description of each type as follows:

1. Horizontal Stepper

• The horizontal stepper is structured which contains the wrapper and it has multiple steps into it. By using material horizontal stepper each step is created by adding the component of mat-step.
• The mat horizontal stepper will add the stepper in a horizontal direction.
• The below example shows the horizontal stepper as follows.

Code:

<mat-horizontal-stepper>
  <mat-step label = "Angular stepper 1">
  Angular material stepper 1
</mat-step>
  <mat-step label = "Angular stepper 2">
  Angular material stepper 2
</mat-step>
  <mat-step label = "Angular stepper 3">
  Angular material stepper end.
</mat-step>
</mat-horizontal-stepper>

Output:

2. Vertical Stepper

• The vertical stepper is structured which contains the wrapper and it has multiple steps into it. By using material vertical stepper each step is created by adding the component of mat-step.
• The mat horizontal stepper will add the stepper in a vertical direction. The below example shows the vertical stepper as follows.

Code:

<mat-vertical-stepper>
  <mat-step label = "Angular stepper 1">
  Angular material stepper 1
</mat-step>
  <mat-step label = "Angular stepper 2">
  Angular material stepper 2
</mat-step>
  <mat-step label = "Angular stepper 3">
  Angular material stepper end.
</mat-step>
</mat-vertical-stepper>

Output:

Angular Material Stepper Multiple Groups

We will use it in multiple groups to form an application. We can use this in the version of angular6, angular7, angular8, and angular9.

To create an application by using angular material stepper in multiple groups we need to import the stepper, input, list, animations, and button module for creating simple web applications.

To create multiple groups we need to add the below code into the module.ts file.

Code:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
……….
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Output:

To create multiple groups we need to add the code into the app component ts file. We are adding the below code into the component ts file.

Code:

import { Component } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component ( {
selector: 'app-root',
templateUrl : './app.component.html',
styleUrls: ['./app.component.css']
} )
………………..
}
submit(){
  console.log (this.firstFormGroup.value);
  console.log (this.secondFormGroup.value);
}
}

Output:

To create multiple groups we need to add the code into app component html file. We are adding below code into the component html file.

Code:

<h1> Angular material stepper multiple groups </h1>
<h3> Angular material stepper </h3>
<mat-horizontal-stepper [linear] = "isLinear" #stepper>
……………………….
<button mat-button (click) = "submit()">Submit</button>
</div>
</mat-step>
</mat-horizontal-stepper>

Output:

Example of Angular Material Stepper

Below is the example of a material stepper as follows. First, we are creating a new project for the angular stepper.

To create an example of a material stepper we need to install the angular CLI in our system.

Code:

npm install -g @angular/cli

Output:

Now we are creating workspace name as angular-material-stepper. The below example shows to creation the workspace of our angular project as follows. We are adding an angular routing option and selecting the stylesheet format as CSS.

Code:

ng new angular-material-stepper

Output:

After creating the workspace of the angular material autocomplete project in this step we are installing the angular CDK, angular animations, and material as follows.

Code:

npm install @angular/material –save

Output:

After installing angular material, cdk, and animation in this step we are adding the same in our project as follows. The below example shows adding the angular material library as follows.

Code:

cd angular-material-stepper/
ng add @angular/material

Output:

Now we need to add the below code in the app.module.ts file. In the below example, we are importing the stepper module.

Code:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
………………….
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Now we need to add the below code in app.component.ts file.

Code:

import { Component } from '@angular/core';
import { FormControl } from "@angular/forms";
…………………..
secondCtrl: ['', Validators.required]
  });

Output:

Now we need to add the below code in app.component.html file.

Code:

<mat-horizontal-stepper [linear] = "isLinear" #stepper>
<mat-step [stepControl] = "firstFormGroup">
…………………
</mat-step>
</mat-horizontal-stepper>

Output:

The below figure shows the output of the example project of material stepper as follows.

Conclusion

In a web-based application that used form submission it’s important to keep our page neat and user understandable same time we need to use various components of angular material. Basically angular material is providing the component of the stepper by using this we can create step based form.

Recommended Articles

This is a guide to Angular Material Stepper. Here we discuss the introduction, angular material stepper variants, multiple groups, and examples. You may also have a look at the following articles to learn more –

1. Angular Material Overlay
2. Angular Material NPM
3. Angular material radio button
4. Angular material slider