JavaScript
Need help with angular-clipboard?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
omichelsen

Description

Copy to clipboard with AngularJS directive, without using Flash.

196 Stars 60 Forks MIT License 103 Commits 14 Opened issues

Services available

Need anything else?

angular-clipboard

Build Status Test Coverage npm bundle size (minified + gzip)

Copy text to clipboard by clicking a button without using Flash. This is using the Selection API and Clipboard API available in newer browsers.

Browser support: Chrome 43+, Firefox 41+, Opera 29+, IE10+, Safari 10+ and Mobile Safari 10+.

See the demo.

Install

$ npm install angular-clipboard --save

angular-clipboard has no other dependencies than Angular itself.

Usage

Require angular-clipboard as a dependency for your app:

angular.module('MyApp', ['angular-clipboard'])
    .controller('MyController', ['$scope', function ($scope) {
        $scope.supported = false;

    $scope.textToCopy = 'I can copy by clicking!';

    $scope.success = function () {
        console.log('Copied!');
    };

    $scope.fail = function (err) {
        console.error('Error!', err);
    };
}]);

Copy text from an input field by clicking a button:

Copy

You can supply a method to be called for the

on-copied
and
on-error
event. The
on-error
function will be called with the error object as argument
err
.

The optional

supported
property can be used to detect browser support for the clipboard feature.

Use as service

You can also invoke the copy to clipboard action directly by injecting the

clipboard
service. Just remember it has to be in a click event, as clipboard access requires user action.
angular.module('MyApp', ['angular-clipboard'])
    .controller('MyController', ['$scope', 'clipboard', function ($scope, clipboard) {
        if (!clipboard.supported) {
            console.log('Sorry, copy to clipboard is not supported');
        }

    $scope.clickHandler = function () {
        clipboard.copyText('Copy this text');
    };
}]);

Use with a module loader

If you are using a module loader, you can import the module name when requiring it in angular. Works with any AMD/UMD/CommonJS module loader.

import clipboardModule from 'angular-clipboard';

angular.module('mymodule', [clipboardModule.name]);

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.