Angular 5 - Copiar al portapapeles

Estoy tratando de implementar un ícono que, al hacer clic, guardará una variable en el portapapeles del usuario. Actualmente he probado varias bibliotecas y ninguna de ellas ha podido hacerlo.

¿Cómo copio correctamente una variable al portapapeles del usuario en Angular 5?

Solución 1: copie cualquier texto

HTML

<button (click)="copyMessage('This goes to Clipboard')" value="click to copy" >Copy this</button>

archivo .ts

copyMessage(val: string){
    const selBox = document.createElement('textarea');
    selBox.style.position = 'fixed';
    selBox.style.left = '0';
    selBox.style.top = '0';
    selBox.style.opacity = '0';
    selBox.value = val;
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);
  }

Solución 2: copiar desde un TextBox

HTML

 <input type="text" value="User input Text to copy" #userinput>
      <button (click)="copyInputMessage(userinput)" value="click to copy" >Copy from Textbox</button>

archivo .ts

    /* To copy Text from Textbox */
  copyInputMessage(inputElement){
    inputElement.select();
    document.execCommand('copy');
    inputElement.setSelectionRange(0, 0);
  }

Demo aquí

Solución 3: Importe una directiva de terceros ngx-clipboard

<button class="btn btn-default" type="button" ngxClipboard [cbContent]="Text to be copied">copy</button>

Solución 4: Directiva personalizada

Si prefiere usar una directiva personalizada, consulte la respuesta de Dan Dohotaru, que es una elegante solución implementada con ClipboardEvent.

Sé que esto ya ha sido muy votado aquí por ahora, pero prefiero optar por un enfoque de directiva personalizado y confiar en ClipboardEvent como sugirió @jockeisorby, mientras que también me aseguro de que el oyente se elimine correctamente (se debe proporcionar la misma función tanto para agregar como para eliminar oyentes de eventos)

demo de stackblitz

import { Directive, Input, Output, EventEmitter, HostListener } from "@angular/core";

@Directive({ selector: '[copy-clipboard]' })
export class CopyClipboardDirective {

  @Input("copy-clipboard")
  public payload: string;

  @Output("copied")
  public copied: EventEmitter<string> = new EventEmitter<string>();

  @HostListener("click", ["$event"])
  public onClick(event: MouseEvent): void {

    event.preventDefault();
    if (!this.payload)
      return;

    let listener = (e: ClipboardEvent) => {
      let clipboard = e.clipboardData || window["clipboardData"];
      clipboard.setData("text", this.payload.toString());
      e.preventDefault();

      this.copied.emit(this.payload);
    };

    document.addEventListener("copy", listener, false)
    document.execCommand("copy");
    document.removeEventListener("copy", listener, false);
  }
}

y luego úsalo como tal

<a role="button" [copy-clipboard]="'some stuff'" (copied)="notify($event)">
  <i class="fa fa-clipboard"></i>
  Copy
</a>

public notify(payload: string) {
   // Might want to notify the user that something has been pushed to the clipboard
   console.info(`'${payload}' has been copied to clipboard`);
}

Nota: window["clipboardData"]tenga en cuenta que es necesario para IE, ya que no comprendee.clipboardData

Creo que esta es una solución mucho más limpia al copiar texto:

copyToClipboard(item) {
    document.addEventListener('copy', (e: ClipboardEvent) => {
      e.clipboardData.setData('text/plain', (item));
      e.preventDefault();
      document.removeEventListener('copy', null);
    });
    document.execCommand('copy');
  }

Y luego simplemente llame a copyToClipboard al hacer clic en el evento en html. (clic) = "copyToClipboard ('texttocopy')"

A partir de Angular Material v9, ahora tiene un CDK de portapapeles

Portapapeles | Material angular

Puede usarse tan simplemente como

<button [cdkCopyToClipboard]="This goes to Clipboard">Copy this</button>

Versión modificada de la respuesta de jockeisorby que corrige que el controlador de eventos no se elimina correctamente.

copyToClipboard(item): void {
    let listener = (e: ClipboardEvent) => {
        e.clipboardData.setData('text/plain', (item));
        e.preventDefault();
    };

    document.addEventListener('copy', listener);
    document.execCommand('copy');
    document.removeEventListener('copy', listener);
}

Puede lograr esto usando módulos angulares:

navigator.clipboard.writeText('your text').then().catch(e => console.error(e));

El siguiente método se puede utilizar para copiar el mensaje: -

export function copyTextAreaToClipBoard(message: string) {
  const cleanText = message.replace(/<\/?[^>]+(>|$)/g, '');
  const x = document.createElement('TEXTAREA') as HTMLTextAreaElement;
  x.value = cleanText;
  document.body.appendChild(x);
  x.select();
  document.execCommand('copy');
  document.body.removeChild(x);
}

La mejor manera de hacer esto en Angular y mantener el código simple es usar este proyecto.

https://www.npmjs.com/package/ngx-clipboard

    <fa-icon icon="copy" ngbTooltip="Copy to Clipboard" aria-hidden="true" 
    ngxClipboard [cbContent]="target value here" 
    (cbOnSuccess)="copied($event)"></fa-icon>

Copiar usando angular cdk,

Module.ts

import {ClipboardModule} from '@angular/cdk/clipboard';

Copie mediante programación una cadena: MyComponent.ts,

class MyComponent {
  constructor(private clipboard: Clipboard) {}

  copyHeroName() {
    this.clipboard.copy('Alphonso');
  }
}

Haga clic en un elemento para copiar a través de HTML:

<button [cdkCopyToClipboard]="longText" [cdkCopyToClipboardAttempts]="2">Copy text</button>

Referencia: https://material.angular.io/cdk/clipboard/overview

La primera solución sugerida funciona, solo necesitamos cambiar

selBox.value = val;

A

selBox.innerText = val;

es decir,

HTML:

<button (click)="copyMessage('This goes to Clipboard')" value="click to copy" >Copy this</button>

Archivo .ts:

copyMessage(val: string){
    const selBox = document.createElement('textarea');
    selBox.style.position = 'fixed';
    selBox.style.left = '0';
    selBox.style.top = '0';
    selBox.style.opacity = '0';
    selBox.innerText = val;
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);
  }