Angular Material Stepper: Styling the Active Header

Question

I'm using Angular Material Stepper and would like to style the selected header to give it rounded borders with blue background. The css am using now is:

::ng-deep .mat-step-header  {
  background-color: #00A9CE;;
  border-radius: 32px;
  width: 100%;
  font-weight: 10px;
  color: #FFFFFF;
}

The css is ok but it applies to all the steps but i only want it to apply to the selected header. There is a class like .mat-step-icon-selected to target the selected icon but there is no equivalent to target the selected header.

I want the selected step to look like the following image (the (2) Fruits - it has rounded borders with blue background) and it is only on the selected step.

Am only interested in the class name that i can use to target the selected header. I tried .mat-step-header-selected but it doesn't work.

Martin Godzina Martin Godzina · Accepted Answer · 2020-03-29T19:49:27

The mat-step-header has the role attribute with the value "tab"

<mat-step-header role="tab">

An element with the role tab also contain so known aria attributes which holds the state of the tab. There is also an aria-selected attribute which indicates wether the mat-step-header is selected or not.

<mat-step-header role="tab" aria-selected="true">

Now that we know that there is that aria attribute we can go and style selected step-headers:

::ng-deep .mat-step-header[aria-selected="true"]  {
  background-color: #00A9CE;;
  border-radius: 32px;
  width: 100%;
  font-weight: 10px;

  & div.mat-step-label.mat-step-label-active.mat-step-label-selected {
      color: #FFF;
  }
}

Additional ressources about aria and role="tab"

Angular Material Stepper: Styling the Active Header

1 Answers