summary.component.html

<div class="border rounded">
    <p class="lead text-center border-bottom bg-light py-2">Search summary</p>
    <p class="text-center font-italic">
        Dataset
    </p>
    <p *ngIf="datasetName && datasetList.length > 0" class="pl-5">{{ getDataset().label }}</p>
    <hr>
    <p class="text-center font-italic" [tooltip]="summaryCriteria" containerClass="theme-color">
        Criteria <span class="far fa-question-circle fa-xs"></span>
    </p>
    <p *ngIf="criteriaList.length < 1" class="pl-5 font-weight-bold">
        No selected criteria
    </p>
    <ul *ngIf="criteriaList.length > 0" class="pl-5 list-unstyled">
        <li *ngFor="let criterion of criteriaList">
            {{ getAttribute(criterion.id).form_label }} {{ printCriterion(criterion) }}
        </li>
    </ul>
    <hr>
    <p class="text-center font-italic" [tooltip]="summaryOutputs" containerClass="theme-color" triggers="mouseenter:click">
        Output <span class="far fa-question-circle fa-xs"></span>
    </p>
    <p *ngIf="outputList.length < 1" class="pl-5 text-danger font-weight-bold">
        At least 1 output required!
    </p>
    <ul *ngIf="outputList.length > 0" class="pl-5 list-unstyled">
        <li *ngFor="let output of outputList">
            {{ getAttribute(output).form_label }}
        </li>
    </ul>
</div>

<ng-template #summaryCriteria>
    <strong>Criteria family list:</strong>
    <ul class="list-unstyled text-left">
        <li *ngFor="let family of criteriaFamilyList">
            {{ family.label }}
        </li>
    </ul>
</ng-template>
<ng-template #summaryOutputs>
    <strong>Outputs family and category list:</strong>
    <ul class="p-0 ml-3 text-left">
        <li *ngFor="let family of outputFamilyList">
            {{ family.label }}
            <ul>
                <li *ngFor="let category of categoryList">
                    {{ category.label }}
                </li>
            </ul>
        </li>
    </ul>
</ng-template>