Stepper (wizard-like workflow) using Angular Material’s

In My last article i discussed on how use tooltip in our application using angular material. In these article I discuss on How to use Stepper in Angular material.
Stepper provides a wizard-like workflow by dividing content into logical steps.
First we need to import “MatStepperModule” in app.module.ts file.


.................
//we need to import first MatTooltipModule From Material.
import {MatStepperModule} from '@angular/material/dialog';
...................
@NgModule({
  .........
  imports: [
                MatStepperModule,
            ...
           ]
})
export class AppModule(){}



Mainly 2 type of Stepper variations horizontal for mat-horizontal-stepper & vertical for mat-vertical-stepper.
mat-horizontal-stepper selector used to create a horizontal stepper, and mat-vertical-stepper selector used to create a vertical stepper. mat-step components need to be placed inside either one of the two stepper components.
Horizontal & Vertical Stepper
Full Code For Horizontal & Vertical Stepper


<mat-horizontal-stepper [linear]="isLinear" #stepper>
  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Fill Basic Information</ng-template>
      <mat-form-field>
        <input matInput placeholder="First name" formControlName="fnameCtrl" required>
      </mat-form-field>
      <br/>
      <br/>
      <mat-form-field>
        <input matInput placeholder="Last name" formControlName="lnameCtrl" 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>Fill Address</ng-template>
      <mat-form-field>
        <input matInput placeholder="Address" formControlName="addressCtrl" 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>
    You are now done.
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-horizontal-stepper>


import {Component,OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
selector: 'stepper',
templateUrl: 'stepper.html'
})
export class BasicStepper implements OnInit {

isLinear = true;
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;

constructor(private _formBuilder: FormBuilder) {}

ngOnInit() {
this.firstFormGroup = this._formBuilder.group({
fnameCtrl: ['', Validators.required],
lnameCtrl: ['', Validators.required]
});
this.secondFormGroup = this._formBuilder.group({
addressCtrl: ['', Validators.required]
});
}

}




Types of steps

Types Description
Optional Optional attribute can be set on mat-step.
Editable By default, steps are editable. Users can return to previously completed steps and edit their responses
Completed By default, the completed attribute of a step returns true if the step is valid.
Overriding icons Material design icon set via elements in “matStepperIcon”
<ng-template matStepperIcon=”done”>
<mat-icon>done_all</mat-icon>
</ng-template>

Spread the love
  • 31
  •  
  •  
  •  
  • 7
  •  
  •  
  •  
  •