Copy to clipboard from textarea in Angular

Question

I am trying to copy text from a HTML textarea, however I only found a solution with an Input tag like this:

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

Function:

copyInputMessage(inputElement){
  inputElement.select();
  document.execCommand('copy');
  inputElement.setSelectionRange(0, 0);
}

When I want to replace the input tag with a textarea tag it doesn’t work anymore. Is there an similar easy solution with a textarea?

have a look on this thread https://stackoverflow.com/questions/37658524/copying-text-of-textarea-in-clipboard-when-button-is-clicked — Naseer, Nov 25 '19 at 09:51

score 0 · Accepted Answer · answered Nov 25 '19 at 09:46

0

Try like this:

Working Demo

<textarea type="text" #userinput></textarea>

answered Nov 25 '19 at 09:46

Adrita Sharma

21,581
10
69
79

harkesh kumar · Answer 2 · 2019-11-25T11:38:47.153

0

<textarea cols="30" rows="4" [(ngModel)] = "userinput"></textarea>




<button (click)="copyInputMessage()" value="click to copy">Copy from Textbox</button>

Create a Variable in Ts file As String And Using Property binding bind this with Text area value

 userinput: string;


copyInputMessage(this.userinput){
  inputElement.select();
  document.execCommand('copy');
  inputElement.setSelectionRange(0, 0);
}

if You want to use template reference then

<textarea cols="30" rows="4" #userinput></textarea>

in Ts file

@ViewChild('userinput') nameInputRef: ElementRef;

edited Nov 25 '19 at 11:38

answered Nov 25 '19 at 09:50

harkesh kumar

833
2
13
35

why to use `[(ngModel)]` instead `template reference variable`? – Prashant Pimpale Nov 25 '19 at 09:53
Explain that in the answer! – Prashant Pimpale Nov 25 '19 at 10:26

Copy to clipboard from textarea in Angular

2 Answers2