1

How can I identify a stepper from a array of steppers and set the step index on that stepper. example I have 4 steppers generated through a *ngFor loop, this.stepper always point to the first stepper and this.stepper.selectedIndex is for the first stepper not the nth stepper. How do I select the correct stepper to change the index?

<div *ngFor="let item of items; let i = index">
        <mat-vertical-stepper #stepper >
          <mat-step  label="Order Received:" state="phone">
            <mat-card >
              <p class="blinkme">Order Received</p>
            </mat-card>
          </mat-step>
      
          <mat-step label="Order Processing:" state="order">
            <mat-card>
                Order Processing---
                 <p class="blinkme">  Order Time + {{SP}} Minutes </p>
            </mat-card>
          </mat-step>
        </mat-vertical-stepper>
      </div>

so for 4 items I have 4 expansion panels code not shown each panels has item of items end result is 4 stepper embedded in the expansion panel. problem is this.stepper.selectedIndex = index; always points to the first stepper but lookign at the function I can see 4 array steps each with a vertical stepper. I need to get at the Nth step so I can set its index if user selects the Nth expansion panel.

Mohammed Hussain
  • 27
  • 5
  • Can you provide some code? – Kirubel Aug 03 '20 at 11:14
  • wont let me add code edited above this I had to tweak down. – Mohammed Hussain Aug 03 '20 at 11:46
  • I guess you have an `@ViewChild` on `stepper` in your component.ts ? You can't, since every stepper will have the same template-id... Please have a look [here](https://stackoverflow.com/questions/44440879/dynamic-template-reference-variable-inside-ngfor-angular-9) – Random Aug 03 '20 at 11:51
  • @Mohammed Hussain Please add TS side code – Janitha Rasanga Aug 03 '20 at 12:17
  • That's the problem nothing I am trying works on TS side this.stepper.selectedIndex = index; always points to the first stepper. in the array there are 4 steppers. i.e. _results: Array(4) 0: MatStep {_stepper: MatVerticalStepper, 1: MatStep {_stepper: MatVerticalStepper, 2: MatStep {_stepper: MatVerticalStepper, 3: MatStep {_stepper: MatVerticalStepper, length: 4 – Mohammed Hussain Aug 03 '20 at 12:41
  • Can this be solved? I feel there is a solution and it should be easy but I cant find the solution after 4 hours of trying . – Mohammed Hussain Aug 03 '20 at 13:25
  • @Mohammed Hussain - Your question is not clear to us. Actually what you want finally. We can try another way to achieve it. – Janitha Rasanga Aug 03 '20 at 13:27

0 Answers0