How do I copy to clipboard in Angular 2 Typescript?

Question

Is there a way to copy text in clipboard (multi-browser) in Angular2 Typescript framework?

I find only sources of using Javascript, e.g.

document.exe         


        

Answer 1

This is a simple pure Angular2 and javascript solution that doesn't require any libraries and which can be used in an angular component. You could turn it into a service or make it more generic if needed but this will establish the basic idea.

Currently browsers only allow text to be copied to the clipboard from the Selection in an or </code></p> <p>In the component do something like this:</p> <pre><code>import {Inject} from "@angular/core"; import {DOCUMENT} from "@angular/platform-browser"; export class SomeComponent { private dom: Document; constructor(@Inject(DOCUMENT) dom: Document) { this.dom = dom; } copyElementText(id) { var element = null; // Should be <textarea> or <input> try { element = this.dom.getElementById(id); element.select(); this.dom.execCommand("copy"); } finally { this.dom.getSelection().removeAllRanges; } } } </code></pre> <p>Then in the html block associated with the component, do the following:</p> <pre><code><div> <button (click)="copyElementText('elem1')">Copy</button> </div> <textarea id="elem1">Some text

That's it! The button calls the copyElementText() function in it's component and passes it the ID of the html element to get text from and copy to the clipboard.

The function uses standard javascript to get the element by it's ID, select it, execute the "Copy" command on the selection and then deselects it.