Search code examples
angularvmware-clarity

Clarity clr-wizard have disable button not working

I am using clr-wizard from clarity design framework for angular 6 projects.

I have 2 step in clr-wizard like below code.

<clr-wizard>
    <clr-wizard-page [clrWizardPageNextDisabled]="!stepFirstNextButtonEnable">
        <ng-template clrPageTitle>Platforms</ng-template>
        <ng-container>
            ....
        </ng-container>
        <ng-template clrPageButtons>
            <clr-wizard-button class="custom-btn-primary" [type]="'custom-next-step-first'">NEXT</clr-wizard-button>
        </ng-template>
    </clr-wizard-page>

    <clr-wizard-page [clrWizardPageNextDisabled]="!stepSecondNextButtonEnable">
        <ng-template clrPageTitle>Platforms</ng-template>
        <ng-container>
            ....
        </ng-container>
        <ng-template clrPageButtons>
            <clr-wizard-button class="custom-btn-primary" [type]="'custom-next-step-second'">NEXT</clr-wizard-button>
        </ng-template>
    </clr-wizard-page>
</clr-wizard>

I have to use custom NEXT button in each step so I am using <ng-template clrPageButtons></ng-template> and I am using [clrWizardPageNextDisabled] for making button disable in each step.

In first step button disable is working before some days. Now that is not working.

If we remove the custom button <ng-template clrPageButtons>

Reference:

https://vmware.github.io/clarity/documentation/v0.13/wizards

Solution

  • The type of your custom button should be next or custom-next:

    <clr-wizard-button type="custom-next">NEXT</clr-wizard-button>

    Forker Stackblitz