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" 
                (outputListEmpty)="outputListEmpty.emit($event)"
                (change)="change.emit($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"
            (outputListEmpty)="outputListEmpty.emit($event)"
            (change)="change.emit($event)">
        </app-output-by-family>
    </accordion-group>
</accordion>