I have use angular material stepper and i need to activate all the previous steps till selectedIndex step in angular 6. I already tried by using linear stepper but i getting only active step for selectedIndex not for all previous index .Examble i have 5 steps and i select the 3rd one, I getting only 3 rd step in actively remaining 1st &2nd steps are inactive , I need to activate the 1st,2nd,3rd steps
angular 6 , angular material 6
<div class="col-lg-7" *ngIf="!process">
<mat-horizontal-stepper [linear]="isLinear"
[selectedIndex]="currentStep" #stepper>
<ng-container *ngFor="let step of steps">
<ng-template matStepperIcon="home">
<mat-icon>home</mat-icon>
</ng-template>
<mat-step [editable]="isEditable">
<ng-template matStepLabel>{{step}}</ng-
template>
</mat-step>
</ng-container>
</mat-horizontal-stepper>
</div>
```
isLinear = true;
process: Boolean;
steps = [ "Ordered", "Packed", "Shipped", 'Transit', "Delivered" ];
this.process = true;
setTimeout(() => {
this.currentStep = 2;
this.process = false;
}, 1500);
I expected first three steps are active mode but i got only 3rd step in active mode
You can mark the steps that are before the selected step as completed:
<mat-horizontal-stepper [linear]="isLinear" [selectedIndex]="currentStep" #stepper>
<ng-container *ngFor="let step of steps; index as i">
<ng-template matStepperIcon="home">
<mat-icon>home</mat-icon>
</ng-template>
<mat-step #matStep [editable]="isEditable"
[completed]="matStep.interacted || i < currentStep">
<ng-template matStepLabel>{{step}}</ng-template>
</mat-step>
</ng-container>
</mat-horizontal-stepper>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.