Angular Material Stepper component showing label at the bottom

Question

Using Angular Material Stepper component, how to make a stepper that looks like this sample. I want to make the stepper label appear at the bottom of the step number as shown in the sample.

I tried going through the documentations but there doesn't seem to be an option that does this.

Answer 1

Afaik there is no native option to do this at the moment, like you said. What you could try is to use some CSS to style the elements as you wish.

I've just tried it and created this stackblitz. What I've used is only some CSS to overwrite the current styles to make the stepper look like in your example:

.mat-horizontal-stepper-header-container{
  margin-bottom: 20px; 
}

.mat-horizontal-stepper-header{ 
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin-bottom: -15px;
}

.mat-step-label{
  position: relative;
  top: 10px;
}

.mat-stepper-horizontal-line{
 margin: 0 -30px !important;
}

.mat-horizontal-stepper-header .mat-step-icon, .mat-horizontal-stepper-header .mat-step-icon-not-touched{
  margin-right: 0 !important;
}

It's not that elegant, but it seems to work.

If this is what you are looking for you should do some thorough testing with longer/shorter labels and different screen sizes.

Answer 2

Now it's possible to define the position of the label for MatHorizontalStepper with the labelPosition property. Note that "end" is the default value, while "bottom" will place it under the step icon instead of at its side. E.g.:

<mat-horizontal-stepper labelPosition="bottom">
  <!-- content -->
<mat-horizontal-stepper>