Angular 2 Directives Copy to Clipboard directive
Example
In this example we are going to create a directive to copy a text into the clipboard by clicking on an element
copy-text.directive.ts
import {
Directive,
Input,
HostListener
} from "@angular/core";
@Directive({
selector: '[text-copy]'
})
export class TextCopyDirective {
// Parse attribute value into a 'text' variable
@Input('text-copy') text:string;
constructor() {
}
// The HostListener will listen to click events and run the below function, the HostListener supports other standard events such as mouseenter, mouseleave etc.
@HostListener('click') copyText() {
// We need to create a dummy textarea with the text to be copied in the DOM
var textArea = document.createElement("textarea");
// Hide the textarea from actually showing
textArea.style.position = 'fixed';
textArea.style.top = '-999px';
textArea.style.left = '-999px';
textArea.style.width = '2em';
textArea.style.height = '2em';
textArea.style.padding = '0';
textArea.style.border = 'none';
textArea.style.outline = 'none';
textArea.style.boxShadow = 'none';
textArea.style.background = 'transparent';
// Set the texarea's content to our value defined in our [text-copy] attribute
textArea.value = this.text;
document.body.appendChild(textArea);
// This will select the textarea
textArea.select();
try {
// Most modern browsers support execCommand('copy'|'cut'|'paste'), if it doesn't it should throw an error
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
// Let the user know the text has been copied, e.g toast, alert etc.
console.log(msg);
} catch (err) {
// Tell the user copying is not supported and give alternative, e.g alert window with the text to copy
console.log('unable to copy');
}
// Finally we remove the textarea from the DOM
document.body.removeChild(textArea);
}
}
export const TEXT_COPY_DIRECTIVES = [TextCopyDirective];
some-page.component.html
Remember to inject TEXT_COPY_DIRECTIVES into the directives array of your component
...
<!-- Insert variable as the attribute's value, let textToBeCopied = 'http://facebook.com/' -->
<button [text-copy]="textToBeCopied">Copy URL</button>
<button [text-copy]="'https://www.google.com/'">Copy URL</button>
...
