Cut copy text to clipboard with ngClipboard in AngularJS

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
2. Initialize
3. Cut Text
4. Methods
5. Conclusion

---

1. Download and Include

• Download Clipboard.js and ngClipboard.
• Include clipboard.min.js and ngclipboard.min.js with angular.min.js script.

<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-success attribute to handle the clipboard success event.
• error – This triggers when there is an error while executing the action. Add ngclipboard-error attribute 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+

If you found this tutorial helpful then don't forget to share.