igniteui-angular-sovn/src/lib/stepper/step/step.component.html

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

<ng-template #defaultTitle>
    <ng-content *ngIf="isTitleVisible" select='[igxStepTitle]'></ng-content>
    <ng-content *ngIf="isTitleVisible" select='[igxStepSubTitle]'></ng-content>
</ng-template>

<ng-template #contentTemplate>
    <div [ngClass]="contentClasses" #contentContainer>
        <ng-content *ngIf="active || collapsing" select='[igxStepContent]'></ng-content>
    </div>
</ng-template>

<ng-template #defaultIndicator>
    <span>{{ index + 1 }}</span>
</ng-template>

<ng-template #customIndicator>
    <ng-content select='[igxStepIndicator]'></ng-content>
</ng-template>

<div class="igx-stepper__step-header" igxRipple [ngClass]="stepHeaderClasses" (keydown)="handleKeydown($event)"
    (click)="onPointerDown($event)">

    <div *ngIf="isIndicatorVisible" class="igx-stepper__step-indicator">
        <ng-container *ngTemplateOutlet="indicatorTemplate ? indicatorTemplate : defaultIndicator"></ng-container>
    </div>

    <div class="igx-stepper__step-title-wrapper">
        <ng-container *ngTemplateOutlet="defaultTitle"></ng-container>
    </div>
</div>

<ng-container *ngIf="!isHorizontal">
    <div class="igx-stepper__step-content-wrapper">
        <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
    </div>
</ng-container>