Post
Ask Question

Copying Text to Clipboard in AngularJS

Copying text to the clipboard is a common requirement in web applications, whether it's for sharing links, copying codes, or other purposes. In this article, we will explore how to implement a copy-to-clipboard functionality in an AngularJS application.

Prerequisites

To follow this tutorial, you should have a basic understanding of AngularJS and JavaScript.

Step 1. Setting Up the AngularJS Application

First, let's set up a simple AngularJS application. Make sure you include the AngularJS library in your HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Copy to Clipboard in AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="clipboardApp" ng-controller="clipboardController">
    <!-- Your AngularJS app content will go here -->
</body>
</html>

Step 2. Creating the AngularJS Module and Controller

Next, let's create an AngularJS module and a controller.

<script>
    var app = angular.module('clipboardApp', []);

    app.controller('clipboardController', ['$scope', function($scope) {
        $scope.textToCopy = "Hello, this is the text to be copied!";
        
        $scope.copyToClipboard = function() {
            var textArea = document.createElement("textarea");
            textArea.value = $scope.textToCopy;
            document.body.appendChild(textArea);
            textArea.select();

            try {
                document.execCommand('copy');
                alert('Text copied to clipboard');
            } catch (err) {
                console.error('Unable to copy', err);
            }

            document.body.removeChild(textArea);
        };
    }]);
</script>

Step 3. Adding the HTML Elements

Now, let's add the HTML elements to allow users to copy the text.

<div class="container">
    <h1>Copy to Clipboard Example</h1>
    <div class="form-group">
        <label for="textToCopy">Text to Copy:</label>
        <input 
            type="text" 
            id="textToCopy" 
            ng-model="textToCopy" 
            class="form-control" 
            readonly
        >
    </div>
    <button 
        ng-click="copyToClipboard()" 
        class="btn btn-primary"
    >
        Copy to Clipboard
    </button>
</div>

Explanation

  1. Creating a Textarea Element: In the copy to clipboard function, we create a textarea element dynamically and set its value to the text we want to copy.
  2. Appending Textarea to Body: The textarea is appended to the body of the document to ensure it is part of the DOM.
  3. Selecting the Text: We then select the text inside the text area.
  4. Copying the Text: Using document.execCommand('copy'), we copy the selected text to the clipboard.
  5. Removing the Textarea: Finally, we remove the textarea element from the document.

Step 4. Styling the Application

You can add some CSS to style the application.

<style>
    .container {
        margin: 50px;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .btn-primary {
        background-color: #007bff;
        border-color: #007bff;
    }
</style>

Example 1

Example 1

Example 2

Example 2

Conclusion

By following these steps, you can easily implement a copy-to-clipboard functionality in your AngularJS application. This feature enhances user experience by allowing users to quickly copy text without manually selecting and copying it. Experiment with this implementation and customize it to fit your application's needs.


Similar Articles