0

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?

MrrrLuiigii
  • 41
  • 2
  • 10

1 Answers1

3

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.

Dmitry Nevada
  • 48
  • 7
  • 2
    I just noticed, that in Chromium `visibility: collapse` property can work incorrectly. So you can use `display: none` and `display: inherit` accordingly instead. – Dmitry Nevada Aug 08 '22 at 11:44
  • 2
    It's worth noting that `::ng-deep` is deprecated and that using it disables view-encapsulation, which is core feature of Angular. See https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep. – Michael De Soto Aug 10 '22 at 01:30