Disable a step in CDK Stepper / prevent to go back to previous step

Question

I have a CdkStepper in my Angular app - consisting of 4 steps - which behaves quite regularly. No step is optional, so you cannot jump over any step, but the user can always go back to the previous step.

CdkStepper: https://material.angular.io/cdk/stepper/

Now I have a special case, where the stepper is being opened directly at step 2, and in this case I need to disable the option to go back to the previous (the first ) step while still allowing to step back from 4 to 3 and 3 to 2.

My code is similar to the example here: 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>

StackOverflow and Google search didn't give me an answer.

score 3 · Accepted Answer · answered May 07 '19 at 11:43

Really reading the documentation helps sometimes..

By default, steps are editable, which means users can return to previously completed steps and edit their responses. editable="false" can be set on CdkStep to change the default.

-> https://material.angular.io/cdk/stepper/overview#types-of-steps

step1.editable = false;

does the "trick" :-)

Disable a step in CDK Stepper / prevent to go back to previous step

1 Answers1