Angular Material Stepper Component Prevent Going To All The Non Visited Steps
Answer : The solution that I found to this problem is to use completed attribute of step. Refer to the line of code given below: <mat-step [completed]="isCompleted"> When isCompleted is true it will enable the next step. Note: For this to work, the stepper component must be in the linear mode. This can be done by setting the attribute linear on the stepper component, like <mat-horizontal-stepper linear> Check this link . You need to use linear stepper. A stepper marked as linear requires the user to complete previous steps before proceeding. For each step, the stepControl attribute can be set to the top level AbstractControl that is used to check the validity of the step. Example shown as below import { Component, Input } from '@angular/core'; import {FormBuilder, FormGroup, Validators} from '@angular/forms'; import {MatIconRegistry} from '@angular/material'; @Component({ selector: 'stepper', te...