226

I am trying to implement an icon that when clicked will save a variable to the user's clipboard. I have currently tried several libraries and none of them have been able to do so.

How do I properly copy a variable to the user's clipboard in Angular 5?

2
  • you can use ngxyz-c2c, there are multiple ways to do it. Commented Dec 12, 2019 at 21:24
  • 1
    If you're using Angular Material then version 9.0.0 (released Feb 6th, 2020) introduced the super easy to use clipboard package. See the Angular documentation and @Nabel's answer. Commented Mar 22, 2020 at 13:06

20 Answers 20

378

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.

13
  • 1
    Great idea, but I copyied your 2nd solution and I keep getting Cannot read property 'select' of undefined in angular 6. Is this angular6-compatible?
    – slevin
    Commented Jul 7, 2018 at 14:43
  • 1
    @slevin I don't think it is related to angular version in any way. DId you add ` #userinput` to your input? Commented Jul 9, 2018 at 1:28
  • 2
    @SangramNandkhile I checked again and again, but still the same error. This is my code <input *ngIf="invitation_code" type="text" readonly value="{{invitation_code}}" #userinput > <button *ngIf="code_success" (click)="copyInputMessage(userinput)" value="click to copy" > Copy code </button> Thanks
    – slevin
    Commented Jul 9, 2018 at 17:32
  • 1
    You can even remove the position, left, top, and opacity. and replace it with a selBox.style.height = '0';
    – Mendy
    Commented Jul 18, 2018 at 15:07
  • 2
    You should NEVER access the DOM directly in angular. Make sure to inject document the right way!
    – Jonathan
    Commented Aug 9, 2021 at 1:47
104

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

6
  • 4
    Kudos for making this a reusable directive. Great idea!
    – Rod
    Commented Jan 24, 2019 at 13:11
  • 2
    indeed, starting with version 12.x something, Safari is again problematic :) Commented Jul 18, 2019 at 13:00
  • 3
    a minimal workaround would be to create a range and add that range to the selection, a working solution would look like this stackblitz.com/edit/angular-labs-copy-clipboard-r1 Commented Jul 18, 2019 at 13:07
  • window["clipboardData"] is undefined for me in IE ? Any idea ? Commented Jul 23, 2020 at 13:11
  • 1
    document.execCommand is deprecated Commented Jun 3, 2022 at 11:39
77

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')".

5
  • 2
    does not work on IE due to the fact that e.clipboardData is not defined. Commented Oct 23, 2018 at 12:26
  • 11
    moreover the removelistener does not work either as the original listener needs to be passed as an argument Commented Oct 23, 2018 at 12:27
  • 2
    Look here for how to get the remove event listener working: stackoverflow.com/a/51843984/3849445
    – user123959
    Commented Aug 27, 2019 at 19:00
  • Works fine in Angular 6! Tested in Chrome. Thank you. Commented Jan 21, 2020 at 13:54
  • 1
    document.execCommand is deprecated Commented Jun 3, 2022 at 11:38
44

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>
5
  • It works like a charm. Never knew a proper solution was there! Commented Mar 31, 2020 at 12:45
  • 3
    available from Angular Material v9. Commented Apr 13, 2020 at 14:14
  • But will it require all of the Angular Material to be installed to just achieve this simple copy to clipboard?
    – muasif80
    Commented Nov 16, 2020 at 16:39
  • 1
    @muasif80 it is part of the cdk so you would only need to install that I believe
    – Nabel
    Commented Nov 17, 2020 at 17:13
  • 3
    Yes, just install ng add @angular/cdk and in your app.module.ts add import { ClipboardModule } from '@angular/cdk/clipboard' and add it to your module imports: imports: [ ..., ClipboardModule ]. Commented Nov 24, 2021 at 9:18
30

Copy using angular cdk,

Module.ts

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

Programmatically copy a string: MyComponent.ts,

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

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

Click an element to copy via HTML:

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

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

3
  • 3
    This forces you to use Angular Material
    – edu
    Commented Oct 16, 2020 at 21:24
  • 1
    This worked so much better than the other ones. I had bugs in the other copy examples and I already had cdk imported. yay!
    – Omzig
    Commented Oct 23, 2020 at 22:03
  • 3
    @edu you don't necessarily need to install the whole @angular/material package, but just its peer dependency: @angular/cdk
    – Memphis
    Commented May 12, 2022 at 9:57
20

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);
}
1
  • 1
    Not working in Firefox. Error - document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler
    – OPTIMUS
    Commented Sep 25, 2019 at 12:48
19

You can achieve this using Angular modules:

navigator.clipboard.writeText('your text').then().catch(e => console.error(e));
1
  • I suggest to await the call, so nothing steals the focus before the operation is done.
    – lilalinux
    Commented Jul 13, 2022 at 8:29
10

It's simple bro

in .html file

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

in .ts file

copyMessage(text: string) {
  navigator.clipboard.writeText(text).then().catch(e => console.log(e));
}
5

For me document.execCommand('copy') was giving deprecated warning and the data I need to copy was inside <div> as textNode rather than <input> or <textarea>.

This is how I did it in Angular 7 (inspired by answers of @Anantharaman and @Codemaker):

<div id="myDiv"> &lt &nbsp This is the text to copy. &nbsp &gt </div>
<button (click)="copyToClipboard()" class="copy-btn"></button>
 copyToClipboard() {
    const content = (document.getElementById('myDiv') as HTMLElement).innerText;
    navigator['clipboard'].writeText(content).then().catch(e => console.error(e));

  }
}

Definitely not the best way, but it serves the purpose.

1
  • Thank you. The other navigator.clipboard would throw an error, navigator['clipboard'] worked just fine. Best way to do it without having to upgrade the entire code base to latest Angular.
    – ScottN
    Commented Aug 24, 2022 at 23:56
3
// for copy the text
import { Clipboard } from "@angular/cdk/clipboard"; // first import this in .ts
 constructor(
    public clipboard: Clipboard
  ) { }   
 <button class="btn btn-success btn-block"(click) = "onCopy('some text')" > Copy< /button>

 onCopy(value) {
     this.clipboard.copy(value);
    }


 // for paste the copied text on button click :here is code
    
    <button class="btn btn-success btn-block"(click) = "onpaste()" > Paste < /button>
    
    onpaste() {
      navigator['clipboard'].readText().then(clipText => {
        console.log(clipText);
      });
    }
1
  • 1
    Thank you for this code snippet, which might provide some limited, immediate help. A proper explanation would greatly improve its long-term value by showing why this is a good solution to the problem and would make it more useful to future readers with other, similar questions. Please edit your answer to add some explanation, including the assumptions you've made Commented May 4, 2021 at 6:00
3

I don't understand all the complicated code and using libraries to do something so simple. just do this:

html:

<span (mousedown)="copyText()">{{text}}</span>

ts:

copyText() {
  navigator.clipboard.writeText(this.text);
}

that's it!

1
  • by far, the best solution Commented Nov 20, 2023 at 23:31
1

Below method can be used for copying the message:-

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);
}
1
  • This indeed is a good solution. I tried it for my application and it worked. Thanks.
    – jaihind
    Commented Jan 3, 2020 at 9:04
1

The best way to do this in Angular and keep the code simple is to use this project.

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>
1

Much More Easier enter image description here

let textToCopy: string = `\nAccess Token: ${conn.accessToken} \nInstance Url: ${conn.instanceUrl} \nOrg ID: ${conn.userInfo.organizationId}`;
navigator.clipboard.writeText(textToCopy.trim());
0

First suggested solution works, we just need to change

selBox.value = val;

To

selBox.innerText = val;

i.e.,

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.innerText = val;
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);
  }
0

Found the simplest solution for myself with pure Angular and ViewChild.

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'cbtest',
  template: `
    <input type="text" #inp/>
    <input type="button" (click)="copy ()" value="copy now"/>`
})

export class CbTestComponent
{
  @ViewChild ("inp") inp : any;

  copy ()
  {
    // this.inp.nativeElement.value = "blabla";  // you can set a value manually too

    this.inp.nativeElement.select ();   // select
    document.execCommand ("copy");      // copy
    this.inp.nativeElement.blur ();     // unselect
  }
}
0

Following Solution 1 of @Sangram's answer (and the comment from @Jonathan):

(In favor of "do not use plain document in angular" and "do not add HTML elements from code if you don't have to...)

// TS

@ViewChild('textarea') textarea: ElementRef;

constructor(@Inject(DOCUMENT) private document: Document) {}

public copyToClipboard(text): void {
  console.log(`> copyToClipboard(): copied "${text}"`);
  this.textarea.nativeElement.value = text;
  this.textarea.nativeElement.focus();
  this.textarea.nativeElement.select();
  this.document.execCommand('copy');
}
/* CSS */
.textarea-for-clipboard-copy {
  left: -10000;
  opacity: 0;
  position: fixed;
  top: -10000;
}
<!-- HTML -->
<textarea class="textarea-for-clipboard-copy" #textarea></textarea>

0

A very simple answer - how to copy text to clipboard.

IN HTML

<input #copy><button (click)="copyToClipboard(copy.value)">Copy To Clipboard</button>

IN TS

copyToClipboard(text) {
// Create a temporary textarea element to hold the text
const textarea = document.createElement('textarea');
textarea.value = text;

// Append the textarea to the document
document.body.appendChild(textarea);

// Select the text in the textarea
textarea.select();

// Copy the selected text to the clipboard
document.execCommand('copy');

// Remove the textarea from the document
document.body.removeChild(textarea);

}

Here is the Stackblitz

https://stackblitz.com/edit/angular-copytexttoclipboard?file=README.md

-1

phoneNoAction = (mobile) => {
    $('.copy').on('click', () =>{
      navigator['clipboard'].writeText(mobile).then().catch(e =>            console.error(e));
    })
  }
<p style="cursor: pointer;"class="card-text" (click)="phoneNoAction(item.MobileNumb)">
{{item.MobileNumb}}</p>

<button class="copy">copy mobile number</button>

2
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Mar 30, 2023 at 8:37
  • Actually I'm new on this platform. Thank you for suggestion. I'll improve next time for sure. Commented Apr 4, 2023 at 7:50
-2
copyCurl(val: string){
    navigator.clipboard.writeText(val).then( () => {
      this.toastr.success('Text copied to clipboard');
    }).catch( () => {
      this.toastr.error('Failed to copy to clipboard');
    });
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.