dataset-tabs.component.html

<div *ngIf="datasetFamilyList.length == 1">
    <div class="border rounded my-2">
        <p class="border-bottom bg-light text-primary py-4 pl-4">List of datasets</p>
        <ul class="p-0">
            <li *ngFor="let dataset of getDatasetListByFamily(datasetFamilyList[0].id); last as isLast"
                class="list-unstyled px-3 pt-3 pb-0">
                <app-dataset-card [dataset]="dataset" [project]="getProject(dataset)"
                    [datasetSelected]="datasetSelected" (select)="select.emit($event)">
                </app-dataset-card>
                <hr *ngIf="!isLast">
            </li>
        </ul>
    </div>
</div>

<accordion *ngIf="datasetFamilyList.length > 1">
    <ng-container *ngFor="let family of datasetFamilyList">
        <accordion-group #ag *ngIf="getDatasetListByFamily(family.id).length > 0" [panelClass]="'custom-accordion'"
            [isOpen]="true" class="my-2">
            <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>
            <div *ngFor="let dataset of getDatasetListByFamily(family.id); last as isLast">
                <app-dataset-card
                    [dataset]="dataset" 
                    [project]="getProject(dataset)"
                    [datasetSelected]="datasetSelected" 
                    (select)="select.emit($event)">
                </app-dataset-card>
                <hr *ngIf="!isLast">
            </div>
        </accordion-group>
    </ng-container>
</accordion>