Disable previous completed steps on mat-stepper in angular 6

Question

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.

Unilocular

Leonardo Can you help me with how you configured stepper using isLinear=true so that user can't go to next screen – Markmarkdown

@Ahmed i just followed the accepted answer steps – Unilocular

Answer 1

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

Dusen

This works like a charm, it's just what i needed. Thanks. One more thing, you know how to give header steps "disabled" appearence? Like when buttons are disabled – Unilocular

@CesarLeonardoOchoaContreras I also don't know exactly but this link might helps you #50075454. Meanwhile if I find anything, update you with same – Dusen

No. i want to disable particular mat-step in programmatically... but this [editable]="editable" are disable all the steps – Esemplastic