Add copy to clipboard button => DONE

src/app/search/components/url-display.component.html

@@ -13,9 +13,19 @@
                 <i class="fas fa-circle-notch fa-spin fa-3x"></i>
                 <span class="sr-only">Loading...</span>
             </div>
-            <p *ngIf="!isLoading()">
+            <!-- <p *ngIf="!isLoading()">
                 <a target="_blank" [href]="getUrl()">{{ getUrl() }}</a>
-            </p>
+            </p> -->
+            <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>
\ No newline at end of file

src/app/search/components/url-display.component.ts

 import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
 
 import { Criterion } from '../store/model';
 
@@ -14,6 +15,8 @@ export class UrlDisplayComponent {
     @Input() criteriaList: Criterion[];
     @Input() outputList: number[];
 
+    constructor(private toastr: ToastrService) { }
+
     isLoading(): boolean {
         if (this.outputList.length > 0) {
             return false;
@@ -28,4 +31,14 @@ export class UrlDisplayComponent {
         }
         return query;
     }
-}
\ No newline at end of file
+
+    copyToClipboard(): void {
+        const selBox = document.createElement('textarea');
+        selBox.value = this.getUrl();
+        document.body.appendChild(selBox);
+        selBox.select();
+        document.execCommand('copy');
+        document.body.removeChild(selBox);
+        this.toastr.success('Copied');
+    }
+}