detail.component.html

<div class="container-fluid">
    <div *ngIf="!(pristine | async)" class="row mt-2 mb-2 justify-content-between">
        <div class="col">
            <button (click)="goBackToResult()" class="btn btn-outline-secondary">
                <span class="fa fa-backward"></span> Back to search results
            </button>
        </div>
    </div>
    <div *ngIf="objectIsLoading | async" id="div-spinner" class="row justify-content-center mt-5">
        <span class="fas fa-circle-notch fa-spin fa-3x"></span>
        <span class="sr-only">Loading...</span>
    </div>
    <div *ngIf="objectIsLoaded | async">
        <app-object-display
            [datasetName]="datasetName | async"
            [outputFamilyList]="outputFamilyList | async"
            [categoryList]="categoryList | async"
            [attributeList]="attributeList | async"
            [object]="object | async"
            [spectraIsLoading]="spectraIsLoading | async"
            [spectraIsLoaded]="spectraIsLoaded | async"
            [spectraCSV]="spectraCSV | async"
            (getSpectraCSV)="getSpectraCSV($event)">
        </app-object-display>
    </div>
</div>