Disable previous completed steps on mat-stepper in angular 6

3
votes

I'm working on a project in Angular 6 with Angular material and in one specific route i have a mat stepper with 6 steps configured with isLinear=true, so the user cant go to the next step until complete the actual step and so on.

But when it comes to step 5, is there a button with some action, and after the user click that button, i want to prevent the user keep back and change the previously completed data.

I'm already disabling the back button, but the user can go back to any previously completed step clicking on the step header that is showing in the top of the stepper.

1
angularangular-materialmat-stepper
Leonardo Can you help me with how you configured stepper using isLinear=true so that user can't go to next screen – Saad Ahmed
@Ahmed i just followed the accepted answer steps – Cesar Leonardo Ochoa Contreras

1 Answers

12
votes

You can use editable input attribute for mat-step like below. Make editable as false on button click in last step, then previous steps won't be editable anymore

In the Template file

<div fxLayout>
  <mat-horizontal-stepper #stepper style="background: #DDD">
    <mat-step label="Step 1" [editable]="editable">Step 1</mat-step>
    <mat-step label="Step 2" [editable]="editable">Step 2</mat-step>
    <mat-step label="Step 3">
      <button (click)="editable=!editable">Disable steps</button>
    </mat-step>
  </mat-horizontal-stepper>
</div>

In the TS file

editable: boolean = true;

Working example is here in Stackblitz