progress-bar.component.html

<div class="row text-center">
    <div class="col">
        <h1>Dataset search</h1>
        <p class="text-muted">Select a dataset, criteria, output and display the result.</p>
    </div>
</div>
<div class="progress-navigation">
    <div class="progress progress-with-circle">
        <div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="4"
            [ngClass]="getStepClass()"></div>
    </div>
    <ul class="nav nav-pills">
        <li class="nav-item checked" [ngClass]="{'active': currentStep === 'dataset'}">
            <a class="nav-link" routerLink="/search/dataset" data-toggle="tab">
                <div class="icon-circle">
                    <span class="fas fa-book"></span>
                </div>
                Dataset
            </a>
        </li>
        <li id="criteriaStep" class="nav-item" [ngClass]="{'active': currentStep === 'criteria', 'checked': criteriaStepChecked}">
            <a *ngIf="datasetName" class="nav-link" [ngClass]="{'disabled': !datasetName}"
                routerLink="/search/criteria/{{datasetName}}" [queryParams]="queryParams" data-toggle="tab">
                <div class="icon-circle">
                    <span class="fas fa-filter"></span>
                </div>
                Criteria
            </a>
            <a *ngIf="!datasetName" class="nav-link" [ngClass]="{'disabled': !datasetName}" data-toggle="tab">
                <div class="icon-circle">
                    <span class="fas fa-filter"></span>
                </div>
                Criteria
            </a>
        </li>
        <li class="nav-item" [ngClass]="{'active': currentStep === 'output', 'checked': outputStepChecked}">
            <a *ngIf="datasetName" class="nav-link" [ngClass]="{'disabled': !datasetName}"
                routerLink="/search/output/{{datasetName}}" [queryParams]="queryParams" data-toggle="tab">
                <div class="icon-circle">
                    <span class="fas fa-eye"></span>
                </div>
                Output
            </a>
            <a *ngIf="!datasetName" class="nav-link" [ngClass]="{'disabled': !datasetName}" data-toggle="tab">
                <div class="icon-circle">
                    <span class="fas fa-eye"></span>
                </div>
                Output
            </a>
        </li>
        <li class="nav-item" [ngClass]="{'active': currentStep === 'result', 'checked': resultStepChecked}">
            <a *ngIf="datasetName" class="nav-link" [ngClass]="{'disabled': outputListEmpty}"
                routerLink="/search/result/{{datasetName}}" [queryParams]="queryParams" data-toggle="tab">
                <div class="icon-circle">
                    <span class="fas fa-table"></span>
                </div>
                Result
            </a>
            <a *ngIf="!datasetName" class="nav-link" [ngClass]="{'disabled': !datasetName}" data-toggle="tab">
                <div class="icon-circle">
                    <span class="fas fa-table"></span>
                </div>
                Result
            </a>
        </li>
    </ul>
</div>