Use mat-stepper just for display

Question

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 ?

Answer 1

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>

stackblitz