Angular – Disable previous completed steps on mat-stepper in angular 6

angularangular-materialmat-stepper

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.

Best Answer

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

Related Solutions

Angular – programmatically move the steps of a mat-horizontal-stepper in Angular / Angular Material

Yes. It is possible to jump to a specific stepper by using selectedIndex property of the MatStepper. Also, MatStepper exposes public methods next() and previous(). You can use them to move back and forth.

In your template:

Add an id to your stepper e.g. #stepper. Then in your goBack() and goForward() methods, pass the stepper id:

<mat-horizontal-stepper #stepper>
    <!-- Steps -->
</mat-horizontal-stepper>    
<!-- second option -->
<div>
   <button (click)="goBack(stepper)" type="button">Back</button>
   <button (click)="goForward(stepper)" type="button">Next</button>
</div>

.. and in your typescript:

import { MatStepper } from '@angular/material/stepper';

goBack(stepper: MatStepper){
    stepper.previous();
}

goForward(stepper: MatStepper){
    stepper.next();
}

Link to stackblitz demo.

You can also use ViewChild to get a reference to the stepper component in your TypeScript as shown below:

@ViewChild('stepper') private myStepper: MatStepper;

goBack(){
    this.myStepper.previous();
}

goForward(){
    this.myStepper.next();
}

In this case, you don't have to pass the stepper reference in the method in your component's html. Link to Demo with ViewChild

You can enable/disable the Back and Next buttons by using the following:

<button (click)="goBack(stepper)" type="button" 
        [disabled]="stepper.selectedIndex === 0">Back</button>
<button (click)="goForward(stepper)" type="button" 
        [disabled]="stepper.selectedIndex === stepper._steps.length-1">Next</button>

Angular Material – Prevent mat-stepper from navigating between steps

What you originally posted:

.mat-horizontal-stepper-header{
    pointer-events: none;
}

does work, as long as you add ::ng-deep to the CSS class. Like this:

::ng-deep .mat-horizontal-stepper-header {
    pointer-events: none !important;
}

Also make sure you are using the horizontal stepper instead of the vertical one. This obviously matters when calling the appropriate CSS class.

Best Answer

Related Solutions

Angular – programmatically move the steps of a mat-horizontal-stepper in Angular / Angular Material

Angular Material – Prevent mat-stepper from navigating between steps

Related Topic