datasets.component.html

<div class="row mt-4">
    <div *ngIf="datasetSearchMetaIsLoading | async" class="col-12 col-md-8 col-lg-9 text-center mt-5">
        <span class="fas fa-circle-notch fa-spin fa-3x"></span>
        <span class="sr-only">Loading...</span>
    </div>
    <div *ngIf="datasetSearchMetaIsLoaded | async" class="col-12 col-md-8 col-lg-9">
        <app-dataset-list [datasetList]="datasetList | async" (updateDatasetList)="updateDatasetList($event)">
        </app-dataset-list>
    </div>
    <div class="col-12 col-md-4 col-lg-3 pt-2">
        <app-summary-multiple
                [currentStep]="currentStep | async"
                [isValidConeSearch]="isValidConeSearch | async"
                [coneSearch]="coneSearch | async"
                [datasetSearchMetaIsLoading]="datasetSearchMetaIsLoading | async"
                [datasetSearchMetaIsLoaded]="datasetSearchMetaIsLoaded | async"
                [datasetList]="datasetList | async"
                [queryParams]="queryParams | async">
        </app-summary-multiple>
    </div>
</div>
<div class="row mt-5 justify-content-between">
    <div class="col">
        <a routerLink="/search-multiple/position" [queryParams]="queryParams | async" class="btn btn-outline-secondary">
            <span class="fas fa-arrow-left"></span> Previous
        </a>
    </div>
    <div class="col col-auto">
        <a routerLink="/search-multiple/result" [queryParams]="queryParams | async"
           class="btn btn-outline-primary">
            Next <span class="fas fa-arrow-right"></span>
        </a>
    </div>
</div>