projects/rebirth-ng/src/lib/flow-step/flow-step.component.ts
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | re-flow-step |
| styleUrls | flow-step.component.scss |
| templateUrl | ./flow-step.component.html |
Methods |
Inputs |
Outputs |
active
|
Type: |
cssClass
|
Type: |
steps
|
Type: |
type
|
Type:
Default value: |
activeChange
|
$event type: EventEmitter
|
| stepClick | ||||||
stepClick(step: , $index: )
|
||||||
|
Parameters :
Returns :
void
|
import { Component, ChangeDetectionStrategy, Input, EventEmitter, Output } from '@angular/core';
import { FlowStep } from './flow-step.model';
@Component({
selector: 're-flow-step',
templateUrl: './flow-step.component.html',
styleUrls: ['./flow-step.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class FlowStepComponent {
@Input() type: 'dot' | 'arrow' = 'arrow';
@Input() steps: FlowStep[];
@Input() active: number;
@Output() activeChange = new EventEmitter<number>();
@Input() cssClass: string;
stepClick(step, $index) {
if ($index < this.active) {
this.activeChange.emit($index);
}
}
}
<ul class="nav nav-tabs step-anchor-{{type}} {{cssClass}}">
<li class="step" *ngFor="let step of steps; let $index = index"
[ngClass]="{done: $index < active, 'active': $index == active}" (click)="stepClick(step,$index)">
<a class="arrow"><i *ngIf="step.icon" class="step-icon {{step.icon}}"></i>{{step.title}}<br>
<small>{{step.description}}</small>
</a>
</li>
</ul>