I'm trying to display a "timeline" and I would like somting that look like this :
For no I have the following :
Using :
<mat-stepper orientation="vertical" >
<div *ngFor="let step of steps; let i = index;">
<mat-step [completed]="false" [editable]="false" state="number">
<ng-template matStepLabel>
Step {{i}}
</ng-template>
</mat-step>
</div>
Is there a way to use mat-stepper only for the display and block the selection ?
You can do this with custom CSS and a few configuration of mat-step
CSS to be added to global styles
.custom-stepper {
.mat-vertical-content-container .mat-vertical-stepper-content {
display: none;
}
.mat-step-icon {
background-color: var(
--mat-stepper-header-selected-state-icon-background-color
);
color: var(--mat-stepper-header-selected-state-icon-foreground-color);
}
}
html
<mat-stepper
orientation="vertical"
[linear]="isLinear"
#stepper
class="custom-stepper"
>
<div *ngFor="let step of steps; let i = index;">
<mat-step [completed]="false" [editable]="true" state="number">
<ng-template matStepLabel> Step {{i}} </ng-template>
</mat-step>
</div>
</mat-stepper>