<accordion [isAnimated]="true">
    <ng-container *ngFor="let family of criteriaFamilyList">
        <accordion-group #ag *ngIf="(attributeList | attributeListByFamily:family.id).length > 0" [panelClass]="'custom-accordion'" [isOpen]="family.opened" class="my-2">
            <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-criteria-by-family 
                [attributeList]="attributeList | attributeListByFamily:family.id" 
                [criteriaList]="criteriaList"
                [svomKeywords]="svomKeywords"
                (selectSvomAcronym)="selectSvomAcronym.emit($event)"
                (resetSvomKeywords)="resetSvomKeywords.emit()"
                (addCriterion)="emitAdd($event)" 
                (deleteCriterion)="emitDelete($event)">
            </app-criteria-by-family>
        </accordion-group>
    </ng-container>
</accordion>