**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){
let 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][1]
**Solution 3:** Import a 3rd party directive [ngx-clipboard][2]
<button class="btn btn-default" type="button" ngxClipboard [cbContent]="Text to be copied">copy</button>
[1]: https://stackblitz.com/edit/angular-6-copy-to-clipboard
[2]: https://github.com/maxisam/ngx-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){
let 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][1]
----------
**Solution 3:** Import a 3rd party directive [ngx-clipboard][2]
<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][3] which is an elegant solution implemented using `ClipboardEvent`.
[1]: https://stackblitz.com/edit/angular-6-copy-to-clipboard
[2]: https://github.com/maxisam/ngx-clipboard
[3]: https://stackoverflow.com/a/52949299/443244
