angular-clipboard travis-ci Bower karma npm

Copy to clipboard with AngularJS directive, without using Flash.

2 years after

angular-clipboard

Build Status Test Coverage

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

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

See the demo.

Install

Install using npm or bower:

$ npm install angular-clipboard --save
$ bower 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:

<input type="text" ng-model="textToCopy">
<button clipboard supported="supported" text="textToCopy" on-copied="success()" on-error="fail(err)">Copy</button>

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]);

Related Repositories

ng-file-upload

ng-file-upload

Lightweight Angular directive to upload files with optional FileAPI shim for cro ...

MEAN-Learning

MEAN-Learning

:clipboard: A Complete Guide to MEAN Stack ...

ng-clip

ng-clip

Copy to clipboard using AngularJS ...

ngclipboard

ngclipboard

An angularjs directive to copy text to clipboard without using flash ...

awesome-angular-components

awesome-angular-components

Catalog of Angular 2+ Components & Libraries ...


Top Contributors

omichelsen greenkeeperio-bot coryasilva ericjperry phpistasty rike422 ziliwesley

Releases

-   v1.5.0 zip tar
-   v1.4.2 zip tar
-   v1.4.1 zip tar
-   v1.4.0 zip tar
-   v1.3.0 zip tar
-   v1.2.1 zip tar
-   v1.2.0 zip tar
-   v1.1.2 zip tar
-   v1.1.1 zip tar
-   v1.1.0 zip tar
-   v1.0.1 zip tar
-   v1.0.0 zip tar