result.component.html

<app-spinner *ngIf="(datasetListIsLoading | async) 
    || (attributeListIsLoading | async) 
    || (criteriaFamilyListIsLoading | async) 
    || (outputFamilyListIsLoading | async)
    || (outputCategoryListIsLoading | async)
    || (dataLengthIsLoading | async)">
</app-spinner>

<div *ngIf="(datasetListIsLoaded | async)
    && (attributeListIsLoaded | async) 
    && (criteriaFamilyListIsLoaded | async) 
    && (outputFamilyListIsLoaded | async)
    && (outputCategoryListIsLoaded | async)
    && (dataLengthIsLoaded | async)" class="row mt-4">
    <div class="col-12">
        <div *ngIf="(dataLength | async) < 1" class="jumbotron mb-4 py-4">
            <div class="lead">
                No data found for this search
            </div>
        </div>
        <ng-container *ngIf="(dataLength | async) > 0">
            <div class="jumbotron mb-4 py-4">
                <div class="lead">
                    Dataset <span class="font-weight-bold">{{ (datasetList | async | datasetByName:(datasetSelected | async)).label }}</span> 
                    selected with <span class="font-weight-bold">{{ dataLength | async }}</span> objects found.
                </div>
            </div>
            <app-download
                [datasetSelected]="datasetSelected | async"
                [datasetList]="datasetList | async"
                [criteriaList]="criteriaList | async"
                [outputList]="outputList | async"
                [coneSearch]="coneSearch | async"
                [dataLength]="dataLength | async"
                [sampRegistered]="sampRegistered | async"
                (broadcast)="broadcastVotable($event)">
            </app-download>
            <app-reminder
                [datasetSelected]="datasetSelected | async"
                [datasetList]="datasetList | async"
                [attributeList]="attributeList | async | sortByOutputDisplay"
                [criteriaFamilyList]="criteriaFamilyList | async"
                [outputFamilyList]="outputFamilyList | async"
                [outputCategoryList]="outputCategoryList | async"
                [criteriaList]="criteriaList | async"
                [coneSearch]="coneSearch | async"
                [outputList]="outputList | async">
            </app-reminder>
            <app-samp
                [datasetSelected]="datasetSelected | async"
                [datasetList]="datasetList | async"
                [sampRegistered]="sampRegistered | async"
                (sampRegister)="sampRegister()"
                (sampUnregister)="sampUnregister()">
            </app-samp>
            <app-url-display
                [datasetSelected]="datasetSelected | async"
                [datasetList]="datasetList | async"
                [criteriaList]="criteriaList | async"
                [outputList]="outputList | async"
                [coneSearch]="coneSearch | async">
            </app-url-display>
            <app-datatable-tab
                [datasetSelected]="datasetSelected | async"
                [instance]="instance | async"
                [datasetList]="datasetList | async"
                [attributeList]="attributeList | async | sortByOutputDisplay"
                [outputList]="outputList | async"
                [queryParams]="queryParams | async"
                [dataLength]="dataLength | async"
                [data]="data | async"
                [dataIsLoading]="dataIsLoading | async"
                [dataIsLoaded]="dataIsLoaded | async"
                [selectedData]="selectedData | async"
                (retrieveData)="retrieveData($event)"
                (addSelectedData)="addSearchData($event)"
                (deleteSelectedData)="deleteSearchData($event)">
            </app-datatable-tab>
        </ng-container>
    </div>
</div>
<div class="row mt-5 justify-content-between">
    <div class="col">
        <a routerLink="/instance/{{ instanceSelected | async }}/search/output/{{ datasetSelected | async }}" [queryParams]="queryParams | async" class="btn btn-outline-secondary">
            <span class="fas fa-arrow-left"></span> Output
        </a>
    </div>
</div>