Angular Copy Text to Clipboard

Copy text to Clipboard from multiple UI elements

Handle case of <span/> inner text

Generic method to handle all elements

1. Component - HTML

<div fxLayout="row" fxLayoutAlign="space-between center" style="padding: 50px;">

    <div><span>NAME: </span> <span id="nameEl{{name}}">{{name}}</span></div>

    <div (click)="copyToClipboard('nameEl'+name)"><mat-icon fontSet="material-icons-outlined">bookmarks</mat-icon></div>

</div>

<div fxLayout="row" fxLayoutAlign="space-between center" style="padding: 50px;">

    <div><span>SURNAME: </span> <span id="surnameEl{{surname}}">{{surname}}</span></div>

    <div (click)="copyToClipboard('surnameEl'+surname)"><mat-icon fontSet="material-icons-outlined">bookmarks</mat-icon></div>

</div>

2. Component - TS

import { Component, OnInit } from "@angular/core";

@Component({ selector: "jhi-test-comp", templateUrl: "./test-comp.component.html", styleUrls: ["./test-comp.component.scss"] })

export class TestCompComponent implements OnInit {

    name = "Myname";

    surname = "MySurname";

    constructor() {}

    ngOnInit(): void {}

    // Handles case of span element  

    // Copy span text to temporary input  

    // Execute command to copy to clipboard  

   copyToClipboard(id: string): void {   

      const copyEl = document.getElementById(id);    

      const inputHelper = document.createElement('input');

      if (inputHelper !== null && copyEl !== null && copyEl.textContent !== null) {

         // Remove white spaces      

         inputHelper.value = copyEl.textContent.replace(/\s/g, '');

         document.body.appendChild(inputHelper);

         inputHelper.select();

         document.execCommand('Copy');

         inputHelper.remove();  

      }

}