Stepper: How to disable navigation via click on steps

[ntziolis]

When using the stepper we would like to fully control the navigation between steps. For this we:

• have dedicated navigation buttons on each step
• and want to disable the ability to click on a specific step and navigate there

Note:

• We are aware of the ability to specify linear and then add validations for each step
• This however is not feasible for our use case
• Instead we wood like to simply disable the ability navigate by clicking on the steps
• In our view this should be global flag on the stepper component

[ddaribo]

Hi @ntziolis,

As a custom scenario the best approach to handle this would be implementing a workaround solution on application level. The Stepper API offers useful methods and properties that could be leveraged in this case.
Here is a StackBlitz sample based on one of the Stepper topic demos demonstrating a possible approach.

The solution involves adding a Boolean flag indicating if a step was clicked to the component class:
private stepWasClicked = false;

The flag can be set on the pointerdown event of each step header element. The latter could be retrieved by getting all elements with the dedicated class from the stepper component’s element in the afterViewInit hook:

@ViewChild(IgxStepperComponent) public stepper: IgxStepperComponent;

  ngAfterViewInit(): void {
    const stepsHeaderElements =
      this.stepper.nativeElement.getElementsByClassName(
        'igx-stepper__step-header'
      );

    Array.from(stepsHeaderElements).forEach((s) => {
      s.addEventListener('pointerdown', (ev: PointerEvent) => {
        this.stepWasClicked = true;
      });
    });
  }

Finally, the activeStepChanging event of the stepper is canceled if a step is clicked, after which the flag is reset.

  public handleActiveStepChanging(event) {
    if (this.stepWasClicked) {
      event.cancel = true;
    }
    this.stepWasClicked = false;
  }

This leaves the "Previous/Next" buttons responsible for navigating and being unable to navigate through clicking the steps. The solution works for both the horizontal and vertical modes. I hope it helps implementing your requirement.