0

I currently have a horizontal mat-stepper component which can be found below;

![enter image description here

The user is currently able to go back to the previous step by clicking the "Back" button OR by clicking the header of each step. I would like to disable the ability to click on the step header to return to the previous step and make it so the only way the user is able to go back to the previous step is by clicking the 'Back' button.

Upon researching, I believe the solution is found in the CSS file, similar to this;

:host ::ng-deep .mat-vertical-stepper-header-container {
    pointer-events: none;
    cursor: not-allowed;
}

:host ::ng-deep .mat-vertical-stepper-header-container .mat-step-header:hover {
    background: inherit;
}

1 Answers1

0

Solution found!

::ng-deep .mat-step-header{
    pointer-events: none !important;
}
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 29 '22 at 20:25