ngClipboard is a custom directive for AngularJS to copy text to the clipboard. It requires clipboard.js along with the directive script.
It does not use flash to handle Clipboard.
You can either cut or copy text using this directive and it uses HTML5 data attributes for functionality.
Contents
1. Download and Include
- Download Clipboard.js and ngClipboard.
- Include
clipboard.min.jsandngclipboard.min.jswithangular.min.jsscript.
<script src='clipboard.js/dist/clipboard.min.js' type='text/javascript'></script> <script src='clipboard.js/dist/clipboard.min.js' type='text/javascript'></script> <script src='angular.min.js' type='text/javascript'></script> <script src='ngclipboard/dist/ngclipboard.min.js' type='text/javascript'></script>
2. Initialize
To enable this directive define ngclipboard directive on the action element and add required data attribute according to requirement.
There are 3 data attributes –
- data-ngclipboard-text – This set the copy or cut text.
- data-ngclipboard-target – Target element from where the copy or cut text.
- data-ngclipboard-action – It either takes – copy or cut value. It is optional when you want to copy text.
On the <script> add ngclipboard dependency on the module.
Example 1 – Copy defined text
Add data-clipboard-text attribute with the copying text as a value.
<button class="btn" ngclipboard data-clipboard-text="Yogesh Singh">Copy to clipboard </button>
<br><br>
<textarea placeholder="Paste Text"></textarea>
<!-- Script -->
<script>
var myApp = angular.module('myapp', ['ngclipboard']);
</script>
Output
Click on the button and paste text on the textarea.
Example 2 – Copy text of target element
Add data-clipboard-target attribute with input element id as value.
<textarea id='txt'>Yogesh singh</textarea>
<button class="btn" ngclipboard data-clipboard-target="#txt">Copy to clipboard </button>
<br><br>
<textarea placeholder="Paste Text"></textarea>
<!-- Script -->
<script>
var myApp = angular.module('myapp', ['ngclipboard']);
</script>
Output
Enter your text the input element and click on the button to copy.
3. Cut Text
Define data-clipboard-action='cut' attribute on the action element.
Example
<textarea id='txt'>Yogesh singh</textarea>
<button class="btn" ngclipboard data-clipboard-target='#txt' data-clipboard-action='cut' >Cut Text</button>
<br/><br/>
<textarea placeholder="Paste Text"></textarea>
<!-- Script -->
<script>
var myApp = angular.module('myapp', ['ngclipboard']);
</script>
Output
Click on the button to cut text of first input element.
4. Methods
It has two method –
- success – This triggers when the action is successfully executed. Add
ngclipboard-successattribute to handle the clipboard success event. - error – This triggers when there is an error while executing the action. Add
ngclipboard-errorattribute to handle the clipboard error event.
Example
<textarea id='txt'>Yogesh singh</textarea>
<button class="btn" ngclipboard data-clipboard-target="#txt" ngclipboard-success='onSuccess(e);' ngclipboard-error='onError(e);'> Copy to clipboard </button>
<br><br>
<textarea placeholder="Paste Text"></textarea>
<!-- Script -->
<script>
var myApp = angular.module('myapp', ['ngclipboard']);
myApp.controller('controller', ['$scope', '$http', function ($scope, $http) {
$scope.onSuccess = function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
};
$scope.onError = function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
}
}]);
</script>
5. Conclusion
It uses selection and execCommand APIs to store text in clipboard instead of Flash. If you want to cut text with this directive then add data-clipboard-action='cut' attribute on the element.
Browser support –
- Chrome 42+
- Firefox 41+
- IE 9+
- Opera 29+
