0

Im looking for the best way to attach an id to a mat step, such that I can identify the current Step from a service. E.g

<!-- component.html -->
<mat-stepper #stepper>
<mat-step someId="step1">content1</mat-step>
<mat-step someId="step2">content2<mat-step>
</mat-stepper>
//component.ts

@ViewChild('stepper') stepper: MatStepper
isFirstStep() {
   return this.stepper.selected.someId === "step1"
}

What is the recommended way for this? I don't want to use index because I am inserting steps dynamically, I also don't want to use ViewChild on all Mat-Steps, because I want to identify the step outside of the component in a service which only has a reference to the stepper and knows the labels. In addition I don't want to use the usual id-attribute because I have the stepper twice in the template.

I had the idea to use a component which extends mat-step and has someId but it seems too complicated. Is there a better way?

pyrogen
  • 209
  • 1
  • 7

0 Answers0