Angular mat-stepper component, styling horizontal-line

[ZenEND]

Bug, feature request, or proposal:

Add some class like "before-selected" to the step that is before selected step. The main task is to make theme for the angular material components, and current issue is just that I can not get the step before selected, also horizontal line before selected step

Expected behavior

Current behavior

Current packages versions

• "@angular/animations": "~9.0.2",
• "@angular/cdk": "^9.2.1",
• "@angular/common": "~9.0.2",
• "@angular/compiler": "~9.0.2",
• "@angular/core": "~9.0.2",
• "@angular/forms": "~9.0.2",
• "@angular/material": "^9.2.1",
• "@angular/cli": "~9.0.3",
• "typescript": "~3.7.5"

[devversion]

Hello! This looks like a question for StackOverflow if I understand your issue correctly. We do not provide any official way to style the horizontal line.

Obviously it's possible to do it by targeting .mat-stepper-horizontal-line, but there is no good way to select the horizontal line before a selected step header. You most likely would need to implement it together with some JS logic as there is no good way to select a horizontal line preceding a step-header with aria-selected=true.

[devversion]

I think adding a class to the step header before the selected one (like you proposed) is rather specific to your use-case and that seems out of scope for the Angular Material stepper. You might be able to add such a class on your own.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}