Angular Material Stepper

Last Updated : 02 Aug, 2024

Angular Material is a UI component library that is developed by Google so that Angular developers can develop modern applications in a structured and responsive way. By making use of this library, we can greatly increase the user experience of an end-user thereby gaining popularity for our application. This library contains modern ready-to-use elements which can be directly used with minimum or no extra code.

The Stepper Component in the Angular material allows the user to create a wizard-like a workflow by dividing the content into logical steps. In order to utilize the Stepper in Angular Material, the Angular <mat-stepper> directive is used, which is responsible for the logic that drives a stepped workflow. Angular Material provides various components that are described below:

Stepper variants: It consists of 2 variants, i.e., Horizontal Stepper & Vertical Stepper, which can be toggle with the help of orientation attribute. The <mat-stepper>, <mat-horizontal-stepper>, and <mat-vertical-stepper> directives are used in angular material for creating workflow steps in a webpage.
Labels: This attribute can be used if the labels in step’s is only text. For complex labels, matStepLabel directive can be used in the template by specifying it inside the mat-step.
Stepper Buttons: It provides 2 button directives, i.e., matStepperPrevious & matStepperNext, that support navigation between different steps.
Linear stepper: This stepper can be created with the help of mat-stepper directive by setting the linear attribute, that needed to complete previous steps before proceeding to following steps.

Syntax:

<mat-stepper [linear]="isLinear" #stepper>
  <mat-step>
  </mat-step>
</mat-stepper>
<mat-horizontal-stepper labelPosition="bottom" linear>
    <mat-step label="Label">
    </mat-step>
</mat-horizontal-stepper>
<mat-vertical-stepper labelPosition="bottom" linear>
    <mat-step label="Label">
    </mat-step>
</mat-vertical-stepper>

Installation Syntax: The basic pre-requisite is that we must have Angular CLI installed on the system in order to add and configure the Angular material library. The following command is executed on the Angular CLI to install the angular material library:

ng add @angular/material

Make sure the path should be opened in the terminal before executing the above command.

Please refer to the Adding Angular Material Component to Angular Application article for the detailed installation procedure.

Adding Stepper Component: To use the Stepper Component, we need to import it into the app.module.ts file:

import {MatStepperModule} from '@angular/material/stepper';

To use the toggle button component in our code we have to import MatStepperModule into the imports array.

Project Structure: After successful installation, the project structure will look like the following image:

Project Structure

Example 1: The below example illustrates the implementation of the Angular Material Stepper.

app.module.ts

JavaScript

import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MatStepperModule } 
    from '@angular/material/stepper';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';

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

app.component.ts

JavaScript

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'AngularApp';
}

app.component.html

HTML

<div>
    <h1>GeeksforGeeks</h1>
    <h3>Angular Material Horizontal Stepper</h3>
    <mat-horizontal-stepper labelPosition="bottom" linear>
        <mat-step label="Shipping Address" 
                  completed="true">
            <p>Shipping Address Details</p>
        </mat-step>
        <mat-step label="Billing Address" 
                  completed="false" optional>
            <p>Billing Address Details</p>
            <div>
                <button mat-button matStepperPrevious>
                      Back
                  </button>
                <button mat-button matStepperNext>
                      Next
                  </button>
            </div>
        </mat-step>
        <mat-step label="Place Order" 
                  completed="false">
            <p>Order Details</p>
        </mat-step>
    </mat-horizontal-stepper>
    <h3>Angular Material Vertical Stepper</h3>
    <mat-vertical-stepper labelPosition="bottom" linear>
        <mat-step label="Shipping Address" 
                  completed="true">
            <p>Shipping Address Details</p>
        </mat-step>
        <mat-step label="Billing Address" 
                  completed="false" optional>
            <p>Billing Address Details</p>
            <div>
                <button mat-button matStepperPrevious>
                      Back
                  </button>
                <button mat-button matStepperNext>
                      Next
                  </button>
            </div>
        </mat-step>
        <mat-step label="Place Order" completed="false">
            <p>Order Details</p>
        </mat-step>
    </mat-vertical-stepper>
</div>

Output:

Example 2: This is another example that describes the implementation of the Angular Material Stepper by specifying the different input fields in Horizontal & Vertical Stepper.

app.module.ts

JavaScript

import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { BrowserModule } from "@angular/platform-browser";
import { MatStepperModule } from "@angular/material/stepper";
import { MatInputModule } from "@angular/material/input";
import { MatButtonModule } from "@angular/material/button";
import { FormsModule, ReactiveFormsModule } 
    from "@angular/forms";
@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MatStepperModule,
        MatInputModule,
        MatButtonModule,
        FormsModule,
        ReactiveFormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

JavaScript

import { Component } from "@angular/core";
import { FormControl } from "@angular/forms";
import { FormGroup } from "@angular/forms";
import { FormBuilder } from "@angular/forms";
import { Validators } from "@angular/forms";
export interface Food {
    value: string;
    display: string;
}
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {
    title = "AngularApp";
    firstFormGroup!: FormGroup;
    secondFormGroup!: FormGroup;
    firstFormGroup1!: FormGroup;
    secondFormGroup1!: FormGroup;
    constructor(private _formBuilder: FormBuilder) { }
    ngOnInit() {
        this.firstFormGroup = this._formBuilder.group({
            firstCtrl: ["", Validators.required]
        });
        this.secondFormGroup = this._formBuilder.group({
            secondCtrl: ["", Validators.required]
        });
        this.firstFormGroup1 = this._formBuilder.group({
            firstCtrl1: ["", Validators.required]
        });
        this.secondFormGroup1 = this._formBuilder.group({
            secondCtrl1: ["", Validators.required]
        });
    }
}

app.component.html

HTML

<div>
    <h1>GeeksforGeeks</h1>
    <h3>Angular Material Horizontal Stepper</h3>
    <mat-horizontal-stepper #stepper linear>
        <mat-step [stepControl]="firstFormGroup">
            <form [formGroup]="firstFormGroup">
                <ng-template matStepLabel>
                      Enter your name
                  </ng-template>
                <mat-form-field>
                    <input matInput placeholder="Last name, First name" 
                           formControlName="firstCtrl" required />
                </mat-form-field>
                <div>
                    <button mat-button matStepperNext>
                          Next
                      </button>
                </div>
            </form>
        </mat-step>
        <mat-step [stepControl]="secondFormGroup">
            <form [formGroup]="secondFormGroup">
                <ng-template matStepLabel>
                      Enter your address
                  </ng-template>
                <mat-form-field>
                    <input matInput placeholder="Address" 
                           formControlName="secondCtrl" required />
                </mat-form-field>
                <div>
                    <button mat-button matStepperPrevious>
                          Back
                      </button>
                    <button mat-button matStepperNext>
                          Next
                      </button>
                </div>
            </form>
        </mat-step>
        <mat-step>
            <ng-template matStepLabel>
                  Done
              </ng-template>
            Details taken.
            <div>
                <button mat-button matStepperPrevious>
                      Back
                  </button>
                <button mat-button (click)="stepper.reset()">
                      Reset
                  </button>
            </div>
        </mat-step>
    </mat-horizontal-stepper>
    <h3>Angular Material Vertical Stepper</h3>
    <mat-vertical-stepper #stepper1 linear>
        <mat-step [stepControl]="firstFormGroup1">
            <form [formGroup]="firstFormGroup1">
                <ng-template matStepLabel>
                      Enter your name
                  </ng-template>
                <mat-form-field>
                    <input matInput placeholder="Last name, First name" 
                           formControlName="firstCtrl1" required />
                </mat-form-field>
                <div>
                    <button mat-button matStepperNext>
                          Next
                      </button>
                </div>
            </form>
        </mat-step>
        <mat-step [stepControl]="secondFormGroup1">
            <form [formGroup]="secondFormGroup1">
                <ng-template matStepLabel>
                      Enter your address
                  </ng-template>
                <mat-form-field>
                    <input matInput placeholder="Address"
                           formControlName="secondCtrl1" required />
                </mat-form-field>
                <div>
                    <button mat-button matStepperPrevious>
                          Back
                      </button>
                    <button mat-button matStepperNext>
                          Next
                      </button>
                </div>
            </form>
        </mat-step>
        <mat-step>
            <ng-template matStepLabel>
                  Done
              </ng-template>
            Details taken.
            <div>
                <button mat-button matStepperPrevious>
                      Back
                  </button>
                <button mat-button (click)="stepper1.reset()">
                      Reset
                  </button>
            </div>
        </mat-step>
    </mat-vertical-stepper>
</div>