output-tabs.component.html

<div *ngIf="outputFamilyList.length == 1">
    <div class="border rounded my-2">
        <p class="border-bottom bg-light text-primary py-4 pl-4 mb-0">{{ outputFamilyList[0].label }}</p>
        <div class="px-3 pb-3 pt-0">
            <app-output-by-family [outputFamily]="outputFamilyList[0]" [datasetAttributeList]="datasetAttributeList"
                [categoryList]="categoryList" [outputList]="outputList" (changed)="change($event)">
            </app-output-by-family>
        </div>
    </div>
</div>

<accordion *ngIf="outputFamilyList.length > 1">
    <accordion-group #ag *ngFor="let family of getOutputFamilyListSortedByDisplay()"
        [panelClass]="'custom-accordion-output'" class="my-2" [isOpen]="true">
        <button class="btn btn-link btn-block clearfix" accordion-heading>
            <div class="pull-left float-left">
                {{ family.label }}
                &nbsp;
                <span *ngIf="ag.isOpen"><span class="fas fa-chevron-up"></span></span>
                <span *ngIf="!ag.isOpen"><span class="fas fa-chevron-down"></span></span>
            </div>
        </button>
        <app-output-by-family [outputFamily]="family" [datasetAttributeList]="datasetAttributeList"
            [categoryList]="categoryList" [outputList]="outputList" (changed)="change($event)">
        </app-output-by-family>
    </accordion-group>
</accordion>