Enable disabled stepper step by a variable

[lahiru]

Initially instead of first step other steps are disabled. I want to enable them by button click. tried as follows but step still disabled.

 

public steps = [
    {
      class: "step1",
      label: "API Setup",
      iconClass: "k-icon k-i-file-bac"
      
    },
    {
      class: "step2",
      label: "File Upload",
      isValid: this.isStepValid,
      iconClass: "myicon1",
      disabled : this.disableStep2
    },
    {
      label: "Review",
      isValid: this.isStepValid,
      iconClass: "k-icon k-i-file-txt",
      disabled : this.disableStep3
    },
    {
      label: "Finish",
      isValid: this.isStepValid,
      iconClass: "k-icon k-i-file-txt",
      disabled : this.disableStep4
    },
  ];

[Hetali]

Hello Lahiru,

In order to enable the steps on button click, update the steps.disabled value instead of modifying the variable disableStep. For example:

public i: number = 1;

public enableSteps() {
  if(this.steps[this.i]) {
    this.steps[this.i].disabled = false;
  }
}

In this StackBlitz example, I have enabled the steps on button click.

I hope this helps.

Regards,
Hetali
Progress Telerik

[lahiru]

Hi Hetali,

It works. thanks