summary.component.html

<accordion [isAnimated]="true">
    <accordion-group #ag [panelClass]="'custom-accordion'" class="my-2">
        <button class="btn btn-link btn-block clearfix" accordion-heading>
            <div class="pull-left float-left">
                Search summary
                &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 class="row">
            <div class="col">
                <div *ngIf="noCriteria()" class="font-weight-bold mb-2 mb-lg-0">
                    No criteria
                </div>
                <div *ngIf="!noCriteria()">
                    <dl class="row mb-2 mb-lg-0">
                        <dt class="col-auto">Criteria list</dt>
                        <div class="w-100 d-block d-sm-none"></div>
                        <dd class="col mb-0">
                            <span *ngIf="coneSearch !== null" class="mb-0">
                                Cone search:
                                <ul class="pl-4 list-unstyled">
                                    <li>RA = {{ coneSearch.ra }}°</li>
                                    <li>DEC = {{ coneSearch.dec }}°</li>
                                    <li>radius = {{ coneSearch.radius }}</li>
                                </ul>
                            </span>
                            <ng-container *ngIf="criteriaList.length > 0">
                                <p *ngFor="let criterion of criteriaList" class="mb-0">
                                    {{ getAttribute(criterion.id).form_label }} {{ printCriterion(criterion) }}
                                </p>
                            </ng-container>
                        </dd>
                    </dl>
                </div>
            </div>
            <div class="w-100 d-block d-lg-none"></div>
            <div class="col">
                <dl class="row mb-0">
                    <dt class="col-auto">Output list</dt>
                    <div class="w-100 d-block d-sm-none"></div>
                    <dd class="col mb-0 output-box">
                        <p *ngFor="let output of outputList" class="mb-0">
                            {{ getAttribute(output).form_label }}
                        </p>
                    </dd>
                </dl>
            </div>
        </div>
    </accordion-group>
</accordion>