ng-clip | angular directive to copy to clipboard

ng-clip angular directive


Stars : 10

Forks : 10

Created by Asaf David

bower install zeroclipboard

Demo Download GitHub

ngClip - Copy to clipboard using AngularJS

An AngularJS simple directive that uses ZeroClipboard and updates the user's clipboard.

How to get it ?

Manual Download

Download the from here


bower install zeroclipboard ng-clip


npm install zeroclipboard ng-clip


ng-clip is available at cdnjs


  1. Add ng-clip.js and ZeroClipboard.js to your main file (index.html)

  2. Update the .swf path location using ngClipProvider

    .config(['ngClipProvider', function(ngClipProvider) {
  3. Set ngClipboard as a dependency in your module

    var myapp = angular.module('myapp', ['ngClipboard'])
  4. Add clip-copy directive to the wanted element, example:

    <a href="" clip-copy="getTextToCopy()" clip-click="doSomething()">Copy</a>
  5. You can optionally override zeroclipboard config parameters using ngClipProvider

        zIndex: 50
  6. You can optionally specify the MIME type by providing using the clip-copy-mime-type attribute:

    <a href="" clip-click="getHtmlToCopy()" clip-copy-mime-type="text/html">Copy HTML</a>
  7. You can also optionally provide a fallback function that gets called if flash is unavailable:

    <a href="" clip-click-fallback="fallback(copy)" clip-copy="getTextToCopy()" clip-click="doSomething()">Copy</a>

    If the fallback function is defined to accept an argument named copy, that argument will be populated with the text to copy.

  8. set auto-hide-on-no-flash = true, it is used to hide button copy when browser flash is none, default auto-hide-on-no-flash = false, example:

    <a href="" auto-hide-on-no-flash="true" clip-copy="getTextToCopy()" clip-click="doSomething()">Copy</a>


You can check out this live example here: see the examples folder for more

Bitdeli Badge


Javascript plugin


Leave a Reply