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" 
            [ngClass]="getStepClass()"
            [ngStyle]="{'background-color': instance.design_color }" 
            role="progressbar" 
            aria-valuenow="1" 
            aria-valuemin="1" 
            aria-valuemax="4">
        </div>
    </div>
    <ul class="nav nav-pills">
        <li class="nav-item checked" [ngClass]="{'active': currentStep === 'dataset'}">
            <a class="nav-link" [ngStyle]="getNavItemAStyle('dataset', true)" routerLink="/instance/{{ instance.name }}/search/dataset/{{ datasetSelected }}" [queryParams]="queryParams" data-toggle="tab">
                <div class="icon-circle" [ngStyle]="getNavItemIconCircleStyle('dataset', true)">
                    <span class="fas fa-book"></span>
                </div>
                Dataset selection
            </a>
        </li>
        <li id="criteriaStep" class="nav-item" [ngClass]="{'active': currentStep === 'criteria', 'checked': criteriaStepChecked}">
            <a *ngIf="datasetSelected" 
                class="nav-link" 
                [ngClass]="{'disabled': !datasetSelected}"
                [ngStyle]="getNavItemAStyle('criteria', criteriaStepChecked)"
                routerLink="/instance/{{ instance.name }}/search/criteria/{{ datasetSelected }}" [queryParams]="queryParams" data-toggle="tab">
                <div class="icon-circle" [ngStyle]="getNavItemIconCircleStyle('criteria', criteriaStepChecked)">
                    <span class="fas fa-filter"></span>
                </div>
                Search criteria
            </a>
            <a *ngIf="!datasetSelected" class="nav-link" [ngClass]="{'disabled': !datasetSelected}" [ngStyle]="getNavItemAStyle('criteria', criteriaStepChecked)" data-toggle="tab">
                <div class="icon-circle" [ngStyle]="getNavItemIconCircleStyle('criteria', criteriaStepChecked)">
                    <span class="fas fa-filter"></span>
                </div>
                Search criteria
            </a>
        </li>
        <li class="nav-item" [ngClass]="{'active': currentStep === 'output', 'checked': outputStepChecked}">
            <a *ngIf="datasetSelected" class="nav-link" [ngClass]="{'disabled': !datasetSelected}" [ngStyle]="getNavItemAStyle('output', outputStepChecked)"
                routerLink="/instance/{{ instance.name }}/search/output/{{ datasetSelected }}" [queryParams]="queryParams" data-toggle="tab">
                <div class="icon-circle" [ngStyle]="getNavItemIconCircleStyle('output', outputStepChecked)">
                    <span class="fas fa-eye"></span>
                </div>
                Output columns
            </a>
            <a *ngIf="!datasetSelected" class="nav-link" [ngClass]="{'disabled': !datasetSelected}" [ngStyle]="getNavItemAStyle('output', outputStepChecked)" data-toggle="tab">
                <div class="icon-circle" [ngStyle]="getNavItemIconCircleStyle('output', outputStepChecked)">
                    <span class="fas fa-eye"></span>
                </div>
                Output columns
            </a>
        </li>
        <li class="nav-item" [ngClass]="{'active': currentStep === 'result', 'checked': resultStepChecked}">
            <a *ngIf="datasetSelected" class="nav-link" [ngClass]="{'disabled': outputList.length < 1}" [ngStyle]="getNavItemAStyle('result', resultStepChecked)"
                routerLink="/instance/{{ instance.name }}/search/result/{{ datasetSelected }}" [queryParams]="queryParams" data-toggle="tab">
                <div class="icon-circle" [ngStyle]="getNavItemIconCircleStyle('result', resultStepChecked)">
                    <span class="fas fa-table"></span>
                </div>
                Result table
            </a>
            <a *ngIf="!datasetSelected" class="nav-link" [ngClass]="{'disabled': !datasetSelected}" [ngStyle]="getNavItemAStyle('result', resultStepChecked)" data-toggle="tab">
                <div class="icon-circle" [ngStyle]="getNavItemIconCircleStyle('result', resultStepChecked)">
                    <span class="fas fa-table"></span>
                </div>
                Result table
            </a>
        </li>
    </ul>
</div>