AngularJS copy to clipboard
Posted By : Udit Kaul | 13-Apr-2016
Places where you want to copy/cut elements of the textbox without using the standard Ctrl+C/Ctrl+X operations,ngclipboard comes to your rescue.
Installing
You could install it using npm by the following command
npm install ngclipboard --save
or you could install it via bower too here is the command,
bower install ngclipboard --save
or you could download it from github here is the link
https://github.com/sachinchoolur/ngclipboard/archive/master.zip
SETUP
First you need to include angularjs and clipboard.js in your document <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script src="https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script> then include ngclipboard.js <script src="dist/ngclipboard.min.js"></script> now add ngclipboard dependency to your module var myApp = angular.module('app', ['ngclipboard']); and now finally add ngclipboard directive to the desired html element <button class="btn" ngclipboard data-clipboard-text="hi this is ngclipboard text"> Copy to clipboard </button> USAGE If you want to copy text from some other element you need to use clipboard data-clipboard-target intead of data-clipboard-text <!-- Target --> <input id="x" value="www.google.com"> <!-- Trigger --> <button class="btn" ngclipboard data-clipboard-target="#x"> </button> Now if you want to cut instead of copy you can define data-clipboard-action attribute to specify if you want to cut or copy,but if you dont specify by default it would be taken as copy <!-- Target --> <textarea id="bar">hi clipboard</textarea> <!-- Trigger --> <button class="btn" ngclipboard data-clipboard-action="cut" data-clipboard-target="#bar"> Cut to clipboard </button> While using data-clipboard-action="cut" attribute keep in mind that you can use the cut operation for <input> or <textarea> elements So,there it is how to copy/cut without using standard Ctrl+C/Crtl+X in AngularJS
THANKS
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Udit Kaul
Udit is a Bright Web App developer, he is OCJP ,OCWCD and OCPLSQL certificated. He has good knowledge of Java and SQL. He likes playing football and very much interested in other sports too.