angular-clipboard


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

``bash
$ npm install angular-clipboard --save
`

angular-clipboard has no other dependencies than Angular
itself.

Usage

Require angular-clipboard as a dependency for your app:

`javascript
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:

`html

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.

$3

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.

`javascript
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');
};
}]);
`

$3

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.

`javascript
import clipboardModule from 'angular-clipboard';

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