angulartimelineangular-material-stepper

Use mat-stepper just for display


I'm trying to display a "timeline" and I would like somting that look like this : enter image description here

For no I have the following :

enter image description here

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 ?


Solution

  • 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