CODEWITHSUNDEEP
angulartypescriptangular-materialmat-stepper
pyrogen
pyrogen

Reputation: 229

Attach id to mat-step

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?

Upvotes: 2

Views: 375

Answers (1)

Igor Beaufils
Igor Beaufils

Reputation: 914

I found that you can use "state", which you can access like : TS :

public stepperChangeStep(event) {
    if (event.selectedStep.state === "something") {
      // do stuff
    }
 }

Html :

<mat-horizontal-stepper #stepper (selectionChange)="stepperChangeStep($event)">
  <mat-step label="{{myTitle}}" state="{{customState}}">
  </mat-step>
</mat-horizontal-stepper>

Don't think it's supposed to be used like that buuuuuuut...

https://material.angular.io/components/stepper/overview

Upvotes: 0

Related Questions