question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

mat-stepper: Allow custom CSS classes for mat-step-header

See original GitHub issue

Please describe the feature you would like to request.

Please add API to add custom css classes to mat-step-header.

What is the use-case or motivation for this proposal?

We want to set custom cursor for disabled steps in linear stepper.

Is there anything else we should know?

Disabled steps have the same hover and click animations, it would be nice to be able to customize them. But I guess there is other issue for that. And custom css classes would also help with this.

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:34
  • Comments:9

github_iconTop GitHub Comments

39reactions
andreElricocommented, Dec 20, 2019

I found a way how to disable a step. The material team should add a disable option on <mat-step ...>

here is a working STACKBLITZ

I (miss)use the aria-labelledby input.

...
<mat-step [stepControl]="secondFormGroup" [aria-labelledby]="stepDisabled ? 'disabled_af' : null">
...

in css:

::ng-deep .mat-step-header[aria-labelledby="disabled_af"] {
  pointer-events: none !important;
  cursor: not-allowed;
  opacity: 0.6;
  background-color: pink /* remove when in prod. Its just there to prove the concept*/
}
  • please use some other aria label as I have here.
  • of course you have to manage the disable-state of the stepper buttons with the known techniques.
9reactions
hriverahdezcommented, Mar 23, 2019

Yes please add this feature. I would like to apply styles to the active step’s header via a class. I’ve done it like this, but it’s kind of a hack

.mat-step-header[aria-selected="true"] { background-color: rgba(0, 0, 0, 0.04) !important }

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular Material Stepper: Styling the Active Header
The css is ok but it applies to all the steps but i only want it to apply to the selected header. There...
Read more >
Stepper - Angular Material
Emits when the user has attempted to move away from the step. Template for step content. Whether user has attempted to move away...
Read more >
Angular Mat Stepper Full Height - StackBlitz
Class. Enum. Rename. Delete. demo.component.css. Rename. Delete. demo.component.html. Rename. Delete. demo.component.ts. Rename. Delete. header. New File.
Read more >
How to change the angular material mat stepper label color?
<ng-template matStepLabel> <div class="stepper-label"> Name of the label </div> </ng-template>. Now in your css file use the "stepper-label" to add styling:
Read more >
Mat-stepper disable step
Please add API to add custom css classes to mat-step-header. What is the use-case or motivation for this proposal? We want to set...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found