output.component.html

<div class="row mt-4">
    <div class="col-12 col-md-8">
        <app-output-tabs
            [outputFamilyList]="outputFamilyList | async"
            [categoryList]="categoryList | async"
            [datasetAttributeList]="datasetAttributeList | async"
            [datasetOutputFamilyList]="datasetOutputFamilyList | async"
            [outputList]="outputList | async"
            (changed)="updateOutputList($event)">
        </app-output-tabs> 
    </div>
    <div class="col-12 col-md-4 pt-2">
        <app-summary
            [datasetName]="datasetName | async"
            [currentStep]="currentStep | async"
            [datasetList]="datasetList | async"
            [criteriaList]="criteriaList | async"
            [datasetAttributeList]="datasetAttributeList | async"
            [outputList]="outputList | async">
        </app-summary>
    </div>
</div>
<div class="row mt-5 justify-content-between">
    <div class="col">
        <a routerLink="/search/criteria/{{datasetName | async}}" class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> Previous</a>
    </div>
    <div class="col col-auto">
        <a routerLink="/search/result/{{datasetName | async}}" class="btn btn-outline-primary">Next <i class="fas fa-arrow-right"></i></a>
    </div>
</div>