Mat stepper does not shows connecting lines when used in for loop

0
votes

I am using mat stepper which is bind with mat expansion panel, both are generated in ngFor loop according to the size of array. but the problem is that the stepper does not shows the connecting lines the it only acts as a bullet-ed list. 

<div *ngFor="let currentUserInteraction of currentUserInteractions">

  <mat-vertical-stepper #stepper>
    <mat-step [stepControl]="currentUserInteraction">
      <ng-template matStepLabel>{{currentUserInteraction.name}}</ng- 
             template>
      <mat-expansion-panel>
        <mat-expansion-panel-header>
        </mat-expansion-panel-header>
     </mat-expansion-panel>
        </mat-step>
     </mat-vertical-stepper>

   </div>

and also , how to display label on both sides of vertical stepper.

2
angulartypescriptangular-material
How did you import the module? - Jacopo Sciampi
import { MatStepperModule } from '@angular/material/stepper'; - Raza Ellahi
@RazaEllahi can you share your stepper code on stackblitz.com? - Abhishek
I am new in angular, can you create stackbliz with this example using ngFor loop to generate stepper - Raza Ellahi
You are creating several steppers! You just need to create a step for each of your current user interactions. - Martín

2 Answers

1
votes

You are creating several steppers! You just need to create a step for each of your current user interactions. Try this:

<mat-vertical-stepper #stepper>
   <mat-step *ngFor="let currentUserInteraction of currentUserInteractions" [stepControl]="currentUserInteraction">
      <ng-template matStepLabel>{{currentUserInteraction.name}}</ng-template>
      <mat-expansion-panel>
         <mat-expansion-panel-header>
         </mat-expansion-panel-header>
      </mat-expansion-panel>
   </mat-step>
</mat-vertical-stepper>
1
votes

You are doing it wrong, you are creating every time new mat-vertical-stepper. You need to add your loop on mat-step, not on mat-vertical-stepper.

HTML:

<mat-vertical-stepper #stepper [linear]="isLinear">
   <mat-step *ngFor="let currentUserInteraction of currentUserInteractions" [stepControl]="currentUserInteraction.key">
      <ng-template matStepLabel>
         {{currentUserInteraction.name}}
      </ng-template>
      <mat-expansion-panel>
         <mat-expansion-panel-header>
         </mat-expansion-panel-header>
      </mat-expansion-panel>
   </mat-step>
</mat-vertical-stepper>

TypeScript:

currentUserInteractions = [
   {name: 'first', key: 'firstStep'},
   {name: 'second', key: 'secondStep'},
   {name: 'third', key: 'thirdStep'},
   {name: 'fourth', key: 'fourthStep'},
];

Also check this example on StackBlitz.