typescript - Angular 5 - Copy to clipboard

Solution 1: Copy any text

HTML

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

.ts file

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

Solution 2: Copy from a TextBox

HTML

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

.ts file

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

Demo Here

Solution 3: Import a 3rd party directive ngx-clipboard

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

Solution 4: Custom Directive

If you prefer using a custom directive, Check Dan Dohotaru's answer which is an elegant solution implemented using ClipboardEvent.

Solution 5: Angular Material

Angular material 9 + users can utilize the built-in clipboard feature to copy text. There are a few more customization available such as limiting the number of attempts to copy data.

I know this has already been highly voted in here by now, but I'd rather go for a custom directive approach and rely on the ClipboardEvent as @jockeisorby suggested, while also making sure the listener is correctly removed (same function needs to be provided for both the add and remove event listeners)

stackblitz demo

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

and then use it as such

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

Note: notice the window["clipboardData"] is needed for IE as it does not understand e.clipboardData

I think this is a much more cleaner solution when copying text:

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

And then just call copyToClipboard on click event in html. (click)="copyToClipboard('texttocopy')".

As of Angular Material v9, it now has a clipboard CDK

Clipboard | Angular Material

It can be used as simply as

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

Modified version of jockeisorby's answer that fixes the event handler not being properly removed.

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