ipsos-components/src/lib/stepper/stepper-horizontal.html

Material Design components for Angular

<div class="mat-horizontal-stepper-header-container">
  <ng-container *ngFor="let step of _steps; let i = index; let isLast = last">
    <mat-step-header  class="mat-horizontal-stepper-header"
                     (click)="step.select()"
                     (keydown)="_onKeydown($event)"
                     [tabIndex]="_focusIndex === i ? 0 : -1"
                     [id]="_getStepLabelId(i)"
                     [attr.aria-controls]="_getStepContentId(i)"
                     [attr.aria-selected]="selectedIndex == i"
                     [index]="i"
                     [icon]="_getIndicatorType(i)"
                     [label]="step.stepLabel || step.label"
                     [selected]="selectedIndex === i"
                     [active]="step.completed || selectedIndex === i || !linear"
                     [optional]="step.optional">
    </mat-step-header>
    <div *ngIf="!isLast" class="mat-stepper-horizontal-line"></div>
  </ng-container>
</div>

<div class="mat-horizontal-content-container">
  <div *ngFor="let step of _steps; let i = index"
       class="mat-horizontal-stepper-content" role="tabpanel"
       [@stepTransition]="_getAnimationDirection(i)"
       [id]="_getStepContentId(i)"
       [attr.aria-labelledby]="_getStepLabelId(i)"
       [attr.aria-expanded]="selectedIndex === i">
    <ng-container [ngTemplateOutlet]="step.content"></ng-container>
  </div>
</div>