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

Question

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:

Wanted situation with 2 as active step:

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

Answer 1

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.