Angular & Copy to Clipboard

I had to implement a copy to clipboard functionality for our Control Panel which lists Orders.

Since I’m a total enemy of flash I pursued a solution suitable for my needs and here it is.

This is based on but I removed most of the styling and simply put the textarea outside of the viewport.


>> The Code!!

First create the helper function in your controller (this can be move to a helper service as well if you wan’t)

$scope.CopyTextToClipboard = function(text) {

    var TextAreaElement = document.createElement("textarea");

    // Place in outside of the visible area of the screen regardless of scroll position. = 'absolute'; = -100; = 0;
    // add text to the textbox
    TextAreaElement.value = text;

    // append TextAreaElement to document

    // select the content;

    try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        $'Copying text "' + text + '" to clipboard was ' + msg);
    } catch (err) {
        $log.error('Cannot copy to clipboard');

    // remove the TextAreaElement from the document

    // unload
    TextAreaElement = undefined;


And now simply bind it to your Element like this

<div ng-click="CopyTextToClipboard('My Text to copy');"></div>

This solution currently supports the following browsers.


  • IE 9+
  • Firefox 41+ (below that you have to enable copy in the user.js but since it’s enabled by default in the next Stable I don’t really care)
  • Chrome 42+
  • Opera 29+
  • Safari has no support for this sadly 🙁


  • Chrome for Android 42+
  • Firefox Mobile 41+

I’m quite happy with this and maybe someone will find this useful.


Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.