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">
                    <div *ngIf="nbCriteria() === 0" class="text-center font-weight-bold pt-5">
                        No selected criteria
                    </div>

                    <div *ngIf="nbCriteria() > 0" class="container-fluid pt-3">
                        <div 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>
                </div>
            </tab>
            <tab>
                <ng-template tabHeading>
                    Outputs <span class="badge badge-secondary">{{ outputList.length }}</span>
                </ng-template>
                <div class="tab-content">
                    I've got an HTML heading. Pretty cool!cdeacdreacfrdea
                </div>
            </tab>
        </tabset>
</div>