-
Notifications
You must be signed in to change notification settings - Fork 98
/
wizard-navigation-bar.component.html
24 lines (24 loc) · 1.13 KB
/
wizard-navigation-bar.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<ul class="steps-indicator steps-{{numberOfWizardSteps}}">
<li [attr.id]="step.stepId" *ngFor="let step of wizardSteps" [ngClass]="{
'current': isCurrent(step),
'editing': isEditing(step),
'done': isDone(step),
'optional': isOptional(step),
'completed': isCompleted(step),
'navigable': isNavigable(step)
}">
<a [awGoToStep]="step">
<div class="label">
<ng-container *ngIf="step.stepTitleTemplate" [ngTemplateOutlet]="step.stepTitleTemplate.templateRef"
[ngTemplateOutletContext]="{wizardStep: step}"></ng-container>
<ng-container *ngIf="!step.stepTitleTemplate">{{step.stepTitle}}</ng-container>
</div>
<div class="step-indicator"
[ngStyle]="{ 'font-family': step.stepSymbolTemplate ? '' : step.navigationSymbol.fontFamily }">
<ng-container *ngIf="step.stepSymbolTemplate" [ngTemplateOutlet]="step.stepSymbolTemplate.templateRef"
[ngTemplateOutletContext]="{wizardStep: step}"></ng-container>
<ng-container *ngIf="!step.stepSymbolTemplate">{{step.navigationSymbol.symbol}}</ng-container>
</div>
</a>
</li>
</ul>