output-tabs.component.html

<accordion [isAnimated]="true">
    <accordion-group #ag *ngFor="let family of outputFamilyList" [panelClass]="'custom-accordion-output'" class="my-2" [isOpen]="family.opened">
        <button class="btn btn-link btn-block clearfix" accordion-heading>
            <span 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>
            </span>
        </button>
        <app-output-by-family
            [outputFamily]="family" 
            [attributeList]="attributeList"
            [outputCategoryList]="outputCategoryList" 
            [outputList]="outputList"
            [designColor]="designColor"
            (change)="change.emit($event)">
        </app-output-by-family>
    </accordion-group>
</accordion>