Material Design - Stepper How to Remove/Disable Steps

Material Design - stepper how to remove/disable steps?

So I managed with this work-around:

https://github.com/angular/material2/issues/7700#issuecomment-336138411

1) Make a reference to the stepper:

<mat-vertical-stepper #stepper></mat-vertical-stepper>

2) Then, on the .ts side:

import { ViewChild } from '@angular/core';
import { MatVerticalStepper } from '@angular/material';

@ViewChild('stepper') stepper: MatVerticalStepper;

clearAdditionalForms(): void {
  this.inventoryForms = [];
  this.stepper._stateChanged(); // <- this : Marks the component to be change detected.
}

This is calling a private method which is probably a really bad idea, so if you have a better/correct solution, let me know, and I'll change the answer

angular material stepper: disable header navigation

Add this to your style sheet. I was trying to disable the header navigation. Tried many things but this hack worked. You can try this till Angular Material Team support this feature.

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

Disable previous completed steps on mat-stepper in angular 6

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

How to hide mat-stepper header in my mat-stepper?

Use ngIf to achieve this. If you want to hide a particular mat-step then, place the ngIf on the mat-step.

<mat-step label="transaction" *ngIf="showStep">
    <button mat-button matStepperNext>Next</button>
</mat-step>

If you want to get rid of the entire mat-horizontal-stepper, then place the ngIf on the <mat-horizontal-stepper>

<mat-horizontal-stepper *ngIf="showStepper">

where you can update the value of showStep or showStepper to true or false depending on whether you want to show the stepper or not.

Note: This will remove the content as well.

If you want to remove just the mat-horizontal-stepper headers and keep the content, then you can do so using CSS.

.mat-horizontal-stepper-header-container {
    display: none !important;
}

---

Related Topics