Search code examples
angularangular-materialangular-material-stepper

Angular Material Stepper: show only current and next step in stepper-header

I am using the Angular Material Stepper(v13.x.x) in horizontal orientation and linear mode.

By default the stepper-header shows all the steps available. However I would like it to only show the active step, the step before and the step after. (And have this shift when I trigger stepper.next() or stepper.previous()).

Current situation with 2 as active step: enter image description here

Wanted situation with 2 as active step: enter image description here

It's important that all 5 steps keep working as they are. How do I achieve this?

Solution

  • The maximum that I managed to achieve in solving this issue is to display the current and next steps. Here is the CSS code for this:

    ::ng-deep {
  // Hide inactive steps and their lines
  .mat-step-header[aria-selected="false"],
  .mat-step-header[aria-selected="false"] + .mat-stepper-horizontal-line {
    visibility: collapse;
  }

  // Except for the next one
  .mat-step-header[aria-selected="true"] + .mat-stepper-horizontal-line + .mat-step-header {
    visibility: visible;
  }
}

    How it looks now.