Angular Material From The Beginning - Part Two

In this article, you will learn about Angular Material.

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 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
 
Angular Material
 
Step 2
 
Now, open the app.module.ts file and import the required module for Stepper.
 
import {MatStepperModule} from '@angular/material/stepper';
 
Angular Material
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3. import { AppRoutingModule } from './app-routing.module';  
  4. import { AppComponent } from './app.component';  
  5. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';  
  6. import { FormsModule,ReactiveFormsModule} from '@angular/forms';  
  7. import { AngularMatstepperComponent } from './angular-matstepper/angular-matstepper.component';  
  8. import { MatStepperModule } from '@angular/material/stepper';  
  9. import { MatButtonModule } from "@angular/material";
    import 'hammerjs';

  10. @NgModule({  
  11.   declarations: [  
  12.     AppComponent, ,  
  13.     AngularMatstepperComponent  
  14.   ],  
  15.   imports: [  
  16.     BrowserModule, FormsModule, ReactiveFormsModule,
  17.     AppRoutingModule, BrowserAnimationsModule,MatStepperModule ,MatButtonModule
  18.   ],  
  19.   providers: [],  
  20.   bootstrap: [AppComponent]  
  21. })  
  22. export class AppModule { }  
Step 3
 
Now, open angular-matstepper.component.html and add the following HTML to create a horizontal stepper.
  1. <mat-horizontal-stepper>  
  2.   <mat-step label="Personal Detail">  
  3.     <p> Step 1</p>  
  4.     <button mat-raised-button color="primary" matStepperNext>Next</button>  
  5.   </mat-step>  
  6.   <mat-step label="Address">  
  7.     <p> Step 2</p>  
  8.     <div>  
  9.       <button mat-raised-button color="primary" style="margin-right:6px;" matStepperNext>Next</button>  
  10.       <button mat-raised-button color="primary" matStepperPrevious>Previous</button>  
  11.     </div>  
  12.   </mat-step>  
  13.   <mat-step label="Reviews Details">  
  14.     <p>Step 3</p>  
  15.     <button mat-raised-button color="primary" style="margin-right:6px;" matStepperPrevious>Previous</button>  
  16.     <button mat-raised-button color="primary" (click)="add()" >Save</button>  
  17.   </mat-step>  
  18. </mat-horizontal-stepper>  
  19. <form>  
  20. </form>   
Step 4 
 
Run the project and check the result.
 
Angular Material 
We can create a vertical stepper by using < mat-vertical-stepper> in place of <mat-horizontal-stepper>.
  1. <mat-vertical-stepper>  
  2.   <mat-step label="Personal Detail">  
  3.     <p> Step 1</p>  
  4.     <button mat-raised-button color="primary" matStepperNext>Next</button>  
  5.   </mat-step>  
  6.   <mat-step label="Address">  
  7.     <p> Step 2</p>  
  8.     <div>  
  9.       <button mat-raised-button color="primary" style="margin-right:6px;" matStepperNext>Next</button>  
  10.       <button mat-raised-button color="primary" matStepperPrevious>Previous</button>  
  11.     </div>  
  12.   </mat-step>  
  13.   <mat-step label="Reviews Details">  
  14.     <p>Step 3</p>  
  15.     <button mat-raised-button color="primary" style="margin-right:6px;" matStepperPrevious>Previous</button>  
  16.     <button mat-raised-button color="primary" (click)="add()" >Save</button>  
  17.   </mat-step>  
  18. </mat-vertical-stepper>  
  19. <form>  
  20. </form>  
Angular Material
 
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.
  1. import { Component, OnInit } from '@angular/core';  
  2. import { FormGroup, FormBuilder } from '@angular/forms'  
  3. @Component({  
  4.   selector: 'app-angular-matstepper',  
  5.   templateUrl: './angular-matstepper.component.html',  
  6.   styleUrls: ['./angular-matstepper.component.css']  
  7. })  
  8. export class AngularMatstepperComponent implements OnInit {  
  9.   
  10.   constructor(private fb: FormBuilder) { }  
  11.   ProfileForm: FormGroup;  
  12.   PersonalDetailForm: FormGroup;  
  13.   
  14.   ngOnInit() {  
  15.     this.ProfileForm = this.fb.group({  
  16.       EmployeeName: [''],  
  17.       Age: ['']  
  18.     })  
  19.     this.PersonalDetailForm = this.fb.group({  
  20.       Address: [''],  
  21.       City: ['']  
  22.     })  
  23.     {  
  24.   }  
  25.   }  
  26.   add() {  
  27.     alert("Employee Details Save successfully")  
  28.   }  
  29. }  
Step 6
 
Now, open angular-matstepper.component.html and add the following HTML.
  1. <mat-horizontal-stepper>  
  2.   <mat-step [stepControl]="ProfileForm">  
  3.     <form [formGroup]="ProfileForm">  
  4.       <ng-template matStepLabel></ng-template>  
  5.       <div>  
  6.         <div>  
  7.           <mat-form-field>  
  8.             <input matInput placeholder="Enter Name" formControlName="EmployeeName">  
  9.           </mat-form-field>  
  10.         </div>  
  11.         <div>  
  12.           <mat-form-field>  
  13.             <input matInput placeholder="Enter Age" formControlName="Age">  
  14.           </mat-form-field>  
  15.         </div>  
  16.         <div>  
  17.           <button mat-raised-button color="primary" style="margin-right:6px;" matStepperNext>Next</button>  
  18.           <button mat-raised-button color="primary" matStepperPrevious>Previous</button>  
  19.         </div>  
  20.       </div>  
  21.       <!-- <button mat-raised-button color="primary" matStepperNext>Next</button> -->  
  22.     </form>  
  23.   </mat-step>  
  24.   <mat-step label="Address">  
  25.     <form [formGroup]="PersonalDetailForm">  
  26.       <ng-template matStepLabel></ng-template>  
  27.       <div>  
  28.         <div>  
  29.           <mat-form-field>  
  30.             <input matInput placeholder="Enter Address" formControlName="Address">  
  31.           </mat-form-field>  
  32.         </div>  
  33.         <div>  
  34.           <mat-form-field>  
  35.             <input matInput placeholder="Enter City" formControlName="City">  
  36.           </mat-form-field>  
  37.         </div>  
  38.         <div>  
  39.           <button mat-raised-button color="primary" style="margin-right:6px;" matStepperNext>Next</button>  
  40.           <button mat-raised-button color="primary" matStepperPrevious>Previous</button>  
  41.         </div>  
  42.       </div>  
  43.     </form>  
  44.   </mat-step>  
  45.   <mat-step label="Reviews Details">  
  46.     <p>Step 3</p>  
  47.     <button mat-raised-button color="primary" style="margin-right:6px;" matStepperPrevious>Previous</button>  
  48.     <button mat-raised-button color="primary" (click)="add()">Save</button>  
  49.   </mat-step>  
  50. </mat-horizontal-stepper>  
Step 7
 
Now, run the project and check the result.
 
Angular Material 
 

Summary

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