Angular 4 – Copiar texto al portapapeles

Solución:

La interacción del usuario es obligatoria para ejecutar document.execCommand, que se utiliza para copiar texto al portapapeles.

Vea mi otra respuesta.

Si no desea utilizar ninguna biblioteca de terceros, puede utilizar el siguiente fragmento para copiar texto en el portapapeles.

function copyTextToClipboard(text) {
  var txtArea = document.createElement("textarea");
  txtArea.id = 'txt';
  txtArea.style.position = 'fixed';
  txtArea.style.top = '0';
  txtArea.style.left="0";
  txtArea.style.opacity = '0';
  txtArea.value = text;
  document.body.appendChild(txtArea);
  txtArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
    if (successful) {
      return true;
    }
  } catch (err) {
    console.log('Oops, unable to copy');
  } finally {
    document.body.removeChild(txtArea);
  }
  return false;
}

Cambio copyToClipboard funciona como se muestra a continuación para llamar a la función copyTextToClipboard

copyToClipboard() {
    this.textToCopy = this.text1 + this.text2 + this.text3;
    var result = this.copyTextToClipboard(this.textToCopy);
    if (result) {
        this.toastr.info('Copied to Clipboard');
    }
}

Necesitas usar ngxClipboard directiva con su imagen. Así es como debe usarlo para resolver su problema:

<td>
    <img src="https://foroayuda.es/./assets/Copy.gif" (click)="copyToClipboard()" ngxClipboard [cbContent]="textToCopy" />
</td> 

Recuerda agregar ClipboardModule en el módulo de tu aplicación. Código de ejemplo a continuación:

import { ClipboardModule } from 'ngx-clipboard';

@NgModule({
  imports: [
    // Other Imports
    ClipboardModule
  ],
  // Other code
})
export class AppModule { }

Esta es la forma más sencilla de copiar al portapapeles.

En tu plantilla

<button (click)="copyToClipboard(sharableLink)">Copy link</button>
<input type="text" value="This is the value to copy" #sharableLink>

En componente

copyToClipboard(element) {
    element.select();
    document.execCommand('copy');
    this.toaster('success', 'Success!', 'Link copied to clipboard.');
  }

---

---

Utiliza Nuestro Buscador