In my Angular application, there is a CdkStepper with 4 steps that functions as expected. Each step must be completed in order, but users can always go back to the previous step if needed.
For more information on CdkStepper: https://material.angular.io/cdk/stepper/
A unique scenario has arisen where the stepper is directly opened at step 2. In this case, I need to prevent users from going back to the previous (first) step, while still allowing them to move from step 4 to 3 and then to 2.
Referencing a code example similar to what I am using: https://stackblitz.com/edit/angular-cdk-stepper-demo
<vwlmz-stepper #stepper linear>
<!-- Step 1 -->
<cdk-step #step1="cdkStep">
<ng-template cdkStepLabel>
...
</ng-template>
</cdk-step>
<!-- Step 2 -->
<cdk-step #step2="cdkStep">
<ng-template cdkStepLabel>
...
</ng-template>
</cdk-step>
<!-- Step 3 -->
<cdk-step #step3="cdkStep">
<ng-template cdkStepLabel>
...
</ng-template>
</cdk-step>
<!-- Step 4 -->
<cdk-step #step4="cdkStep">
<ng-template cdkStepLabel>
...
</ng-template>
</cdk-step>
</vwlmz-stepper>
I have not been able to find a solution on StackOverflow or through Google search.