reminder.component.html

<div class="mb-5">
    <tabset [justified]="true">
        <tab>
            <ng-template tabHeading>
                Criteria <span class="badge badge-pill badge-secondary">{{ nbCriteria() }}</span>
            </ng-template>
            <div class="tab-content container-fluid pt-3">
                <div *ngIf="nbCriteria() === 0" class="text-center font-weight-bold pt-5">
                    No selected criteria
                </div>

                <div *ngIf="nbCriteria() > 0" class="row">
                    <div *ngIf="coneSearch !== null" class="col-12 col-md-6 col-xl-4 pb-3">
                        <span class="title">Cone search</span>
                        <ul class="list-unstyled pl-3">
                            <li>RA = {{ coneSearch.ra }}°</li>
                            <li>DEC = {{ coneSearch.dec }}°</li>
                            <li>radius = {{ coneSearch.radius }} arcsecond</li>
                        </ul>
                    </div>

                    <ng-container *ngFor="let family of criteriaFamilyList">
                        <ng-container *ngIf="criteriaByFamily(family.id).length > 0">
                            <div class="col-12 col-md-6 col-xl-4 pb-3">
                                <span class="title">{{ family.label }}</span>
                                <ul class="list-unstyled pl-3">
                                    <li *ngFor="let criterion of criteriaByFamily(family.id)">
                                        {{ getAttribute(criterion.id).form_label }} {{ printCriterion(criterion) }}
                                    </li>
                                </ul>
                            </div>
                        </ng-container>
                    </ng-container>
                </div>
            </div>
        </tab>
        <tab>
            <ng-template tabHeading>
                Outputs <span class="badge badge-pill badge-secondary">{{ outputList.length }}</span>
            </ng-template>
            <div class="tab-content container-fluid pt-3">
                <div class="row">
                    <ng-container *ngFor="let family of outputFamilyList">
                        <ng-container *ngFor="let category of categoryListByFamily(family.id)">
                            <ng-container *ngIf="outputListByCategory(category.id).length > 0">
                                <div class="col-12 col-md-6 col-lg-4 col-xl-3 pb-3">
                                    <span class="title">{{ family.label }}</span><br>
                                    <span class="title pl-3">{{ category.label }}</span>
                                    <ul class="list-unstyled pl-5">
                                        <li *ngFor="let output of outputListByCategory(category.id)">
                                            {{ getAttribute(output).form_label }}
                                        </li>
                                    </ul>
                                </div>
                            </ng-container>
                        </ng-container>
                    </ng-container>
                </div>
            </div>
        </tab>
    </tabset>
</div>