url-display.component.html

<accordion>
    <accordion-group #ag [isOpen]="true" [panelClass]="'custom-accordion'" class="my-2">
        <button class="btn btn-link btn-block clearfix" accordion-heading>
            <div class="pull-left float-left">
                Direct link to the result (JSON)
                &nbsp;
                <span *ngIf="ag.isOpen"><i class="fas fa-chevron-up"></i></span>
                <span *ngIf="!ag.isOpen"><i class="fas fa-chevron-down"></i></span>
            </div>
        </button>
        <div>
            <div *ngIf="isLoading()" class="text-center">
                <i class="fas fa-circle-notch fa-spin fa-3x"></i>
                <span class="sr-only">Loading...</span>
            </div>
            <div *ngIf="!isLoading()" class="row">
                <div class="col">
                    <a target="_blank" [href]="getUrl()">{{ getUrl() }}</a>
                </div>
                <div class="col-2 align-self-center text-center">
                    <button class="btn btn-sm btn-outline-primary" (click)="copyToClipboard()" title="Copy url to clipboard">
                        <i class="far fa-copy"></i>
                    </button>
                </div>
            </div>
        </div>
    </accordion-group>
</accordion>