reminder.component.html

<div class="jumbotron py-4 custom-jumbotron theme-border">
    <div class="lead">
        Reminder
    </div>
    <hr class="my-4">
        <tabset [justified]="true">
            <tab>
                <ng-template tabHeading>
                    Criteria <span class="badge 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-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-xl-4 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>