[解決済み] Angular 5 - クリップボードにコピーする

質問

クリックするとユーザーのクリップボードに変数が保存されるようなアイコンを実装しようとしています。現在、いくつかのライブラリを試しましたが、どれも実現できていません。

Angular 5で変数をユーザーのクリップボードに正しくコピーするにはどうすればよいですか？

どのように解決するのですか？

解決策1: 任意のテキストをコピーする

HTML

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

.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);
  }

解決策2: テキストボックスからコピーする

HTML

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

.tsファイル

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

デモはこちら

解決策3． サードパーティディレクティブをインポートする ngx-clipboard

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

解決策4． カスタムディレクティブ

カスタムディレクティブを使いたい場合は、Dan Dohotaru さんの 回答 を使って実装されたエレガントなソリューションです。 ClipboardEvent .

解決策5: アンギュラー素材

Angular material 9 + ユーザーは 内蔵クリップボード 機能を使ってテキストをコピーすることができます。コピーの試行回数を制限するなど、いくつかのカスタマイズが可能です。