Angular Material From The Beginning

Introduction

In this article, we will discuss the Angular Material Stepper. Stepper is an Angular Material component that is used to create a wizard-like workflow by separating content into different steps.

In the previous part of the series, we discussed the basics of Angular Material. You can check the previous article from the below-mentioned link.

Angular Material From Beginning - Part One

Angular provides two types of Stepper.

mat-horizontal-stepper
mat-vertical-stepper

The mat-horizontal-stepper selector is used to create a horizontal stepper and the mat-vertical-stepper is used to create a vertical stepper.

Step 1

Let's create a new component by using the following command.

ng g c AngularMatstepper

Step 2

Now, open the app.module.ts file and import the required module for Stepper.

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule,ReactiveFormsModule} from '@angular/forms';
import { AngularMatstepperComponent } from './angular-matstepper/angular-matstepper.component';
import { MatStepperModule } from '@angular/material/stepper';
import { MatButtonModule } from "@angular/material";

import 'hammerjs';
@NgModule({
declarations: [
AppComponent, ,
AngularMatstepperComponent
],
imports: [
BrowserModule, FormsModule, ReactiveFormsModule,
AppRoutingModule, BrowserAnimationsModule,MatStepperModule ,MatButtonModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Step 3

Now, open angular-matstepper.component.html and add the following HTML to create a horizontal stepper.

<mat-horizontal-stepper>
<mat-step label="Personal Detail">
<p> Step 1</p>
<button mat-raised-button color="primary" matStepperNext>Next</button>
</mat-step>
<mat-step label="Address">
<p> Step 2</p>
<div>
<button mat-raised-button color="primary" style="margin-right:6px;" matStepperNext>Next</button>
<button mat-raised-button color="primary" matStepperPrevious>Previous</button>
</div>
</mat-step>
<mat-step label="Reviews Details">
<p>Step 3</p>
<button mat-raised-button color="primary" style="margin-right:6px;" matStepperPrevious>Previous</button>
<button mat-raised-button color="primary" (click)="add()" >Save</button>
</mat-step>
</mat-horizontal-stepper>
<form>
</form>

Step 4

Run the project and check the result.

We can create a vertical stepper by using < mat-vertical-stepper> in place of <mat-horizontal-stepper>.

<mat-vertical-stepper>
<mat-step label="Personal Detail">
<p> Step 1</p>
<button mat-raised-button color="primary" matStepperNext>Next</button>
</mat-step>
<mat-step label="Address">
<p> Step 2</p>
<div>
<button mat-raised-button color="primary" style="margin-right:6px;" matStepperNext>Next</button>
<button mat-raised-button color="primary" matStepperPrevious>Previous</button>
</div>
</mat-step>
<mat-step label="Reviews Details">
<p>Step 3</p>
<button mat-raised-button color="primary" style="margin-right:6px;" matStepperPrevious>Previous</button>
<button mat-raised-button color="primary" (click)="add()" >Save</button>
</mat-step>
</mat-vertical-stepper>
<form>
</form>

Stepper buttons

matStepperNext: This directive is used for navigation to the next step.

matStepperPrevious: This directive is used for navigation to the previous step

We can use the form in the stepper, and we can use a single form for all the steps or separate the forms for all the steps.

Let's create a stepper using forms.

Step 5

Now, open the angular-matstepper.component.ts file and add the following lines.

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms'
@Component({
selector: 'app-angular-matstepper',
templateUrl: './angular-matstepper.component.html',
styleUrls: ['./angular-matstepper.component.css']
})
export class AngularMatstepperComponent implements OnInit {
constructor(private fb: FormBuilder) { }
ProfileForm: FormGroup;
PersonalDetailForm: FormGroup;
ngOnInit() {
this.ProfileForm = this.fb.group({
EmployeeName: [''],
Age: ['']
})
this.PersonalDetailForm = this.fb.group({
Address: [''],
City: ['']
})
{
}
}
add() {
alert("Employee Details Save successfully")
}
}

Step 6

Now, open angular-matstepper.component.html and add the following HTML.

<mat-horizontal-stepper>
<mat-step [stepControl]="ProfileForm">
<form [formGroup]="ProfileForm">
<ng-template matStepLabel></ng-template>
<div>
<div>
<mat-form-field>
<input matInput placeholder="Enter Name" formControlName="EmployeeName">
</mat-form-field>
</div>
<div>
<mat-form-field>
<input matInput placeholder="Enter Age" formControlName="Age">
</mat-form-field>
</div>
<div>
<button mat-raised-button color="primary" style="margin-right:6px;" matStepperNext>Next</button>
<button mat-raised-button color="primary" matStepperPrevious>Previous</button>
</div>
</div>
</form>
</mat-step>
<mat-step label="Address">
<form [formGroup]="PersonalDetailForm">
<ng-template matStepLabel></ng-template>
<div>
<div>
<mat-form-field>
<input matInput placeholder="Enter Address" formControlName="Address">
</mat-form-field>
</div>
<div>
<mat-form-field>
<input matInput placeholder="Enter City" formControlName="City">
</mat-form-field>
</div>
<div>
<button mat-raised-button color="primary" style="margin-right:6px;" matStepperNext>Next</button>
<button mat-raised-button color="primary" matStepperPrevious>Previous</button>
</div>
</div>
</form>
</mat-step>
<mat-step label="Reviews Details">
<p>Step 3</p>
<button mat-raised-button color="primary" style="margin-right:6px;" matStepperPrevious>Previous</button>
<button mat-raised-button color="primary" (click)="add()">Save</button>
</mat-step>
</mat-horizontal-stepper>

Step 7

Now, run the project and check the result.

Summary

In this article, we learned about Angular Material Stepper component.