Home:ALL Converter>Angular Material Stepper: show only current and next step in stepper-header

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

Ask Time:2022-05-24T19:21:58         Author:MrrrLuiigii

Json Formatter

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?

Author:MrrrLuiigii,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/72361992/angular-material-stepper-show-only-current-and-next-step-in-stepper-header
yy