Stepper Using Angular Material

Install angular material : 

Use the Angular CLI’s installation schematic to set up your Angular Material project by running the following command:

ng add @angular/material

import the modules for stepper :

app.module.ts :

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

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import {ReactiveFormsModule} from '@angular/forms';
import {
    MatStepperModule,
    MatInputModule,
    MatButtonModule,
    MatAutocompleteModule,
    MatIconModule, MatCardModule, MatSliderModule
} from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  imports:      [ BrowserModule, FormsModule, ReactiveFormsModule, MatStepperModule,
        MatInputModule,
        MatButtonModule,
        MatAutocompleteModule,
        BrowserAnimationsModule,
        MatIconModule,
        MatCardModule,
        MatSliderModule, ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.component.html

<h2 align="center"> Material Stepper Example </h2>
<mat-horizontal-stepper [linear]="isLinear" #stepper labelPosition="bottom">
  <mat-step [stepControl]="formNameGroup" label="Name" >
    <div style="padding-top: 3%;">
        <form [formGroup]="formNameGroup">
            <!-- <ng-template matStepLabel>Name</ng-template> -->
            <div class="example-form">
              <mat-form-field class="example-full-width">
                <input matInput placeholder="Name" required formControlName="userName">
                <mat-error *ngIf="formNameGroup.controls['userName'].hasError('required')">
                        Username is required!
                    </mat-error>
              </mat-form-field>
            </div>
            <br/>
            <button mat-raised-button color="primary" matStepperNext>Next</button>
        </form>
    </div>
  </mat-step>

  <mat-step [stepControl]="formPasswordGroup" label="Password" >
    <div style="padding-top: 3%;">
        <form [formGroup]="formPasswordGroup">
            <!-- <ng-template matStepLabel>Name</ng-template> -->
            <div class="example-form">
              <mat-form-field class="example-full-width">
                <input type="password" matInput placeholder="Password" required formControlName="passWord">
                <mat-error *ngIf="formPasswordGroup.controls['passWord'].hasError('required')">
                        Password is required!
                    </mat-error>
              </mat-form-field>
            </div>
            <br/>
            <button mat-raised-button color="primary" matStepperNext>Next</button>
        </form>
    </div>
  </mat-step>

  <mat-step [stepControl]="formEmailGroup" label="Email" >
    <div style="padding-top: 3%;">
        <form [formGroup]="formEmailGroup">
            <!-- <ng-template matStepLabel>Name</ng-template> -->
            <div class="example-form">
              <mat-form-field class="example-full-width">
                <input type="text" matInput placeholder="Email" required formControlName="emailID">
                <mat-error *ngIf="formEmailGroup.controls['emailID'].hasError('required')">
                        Email is required!
                    </mat-error>
                <mat-error *ngIf="formEmailGroup.controls['emailID'].hasError('email')">
                    Email is not Valid!
                </mat-error>
              </mat-form-field>
            </div>
            <br/>
            <button mat-raised-button color="primary" matStepperNext>Next</button>
        </form>
    </div>
  </mat-step>

  <mat-step [stepControl]="formPhoneGroup" label="Mobile" >
    <div style="padding-top: 3%;">
        <form [formGroup]="formPhoneGroup">
            <!-- <ng-template matStepLabel>Name</ng-template> -->
            <div class="example-form">
              <mat-form-field class="example-full-width">
                <input type="tel" matInput placeholder="Mobile" required formControlName="mobile">
                <mat-error *ngIf="formPhoneGroup.controls['mobile'].hasError('required')">
                        Mobile is required!
                    </mat-error>
                 <mat-error *ngIf="formPhoneGroup.controls['mobile'].hasError('min')">
                        Mobile No is Wrong!
                    </mat-error>
              </mat-form-field>
            </div>
            <br/>
            <button mat-raised-button color="primary" matStepperNext>Next</button>
        </form>
    </div>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Review</ng-template>
    <h5>You are now done.</h5>
    <div>
        <button mat-raised-button color="primary" matStepperPrevious>Back</button> &nbsp; &nbsp;
        <button mat-raised-button color="accent" type="submit">Submit</button> &nbsp; &nbsp;
        <button mat-raised-button color="warn" (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>

</mat-horizontal-stepper>

app.component.ts

import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  isLinear = true;
  formNameGroup : FormGroup;
  formPasswordGroup : FormGroup;
  formEmailGroup : FormGroup;
  formPhoneGroup : FormGroup;
  constructor(private fb: FormBuilder) { this.createForm(); }
  ngOnit() {}
  createForm() {
  this.formNameGroup  = this.fb.group({
    userName: ['', Validators.required]
  });

  this.formPasswordGroup  = this.fb.group({
    passWord: ['', Validators.required]
  });
  this.formEmailGroup  = this.fb.group({
    emailID: ['', Validators.compose([Validators.required, Validators.email])]
  });
  this.formPhoneGroup  = this.fb.group({
    mobile: ['', Validators.compose([Validators.required, Validators.min(10)])]
  });
  }
}

now using below command  we can see the following output:

ng serve