Angular copyToClipboard

Angular Copy Paste | copyToClipboard

Angular copyToClipboard -
Simple copy to clipboard functionality in angular without any 3rd party dependencies.

Stayed Informed - ng-cut, ng-copy, ng-paste Events


The copyToClipboard module
//angular provider -  copyToClipboard 
app.provider('$copyToClipboard', [function () {
    this.$get = ['$q''$window'function ($q$window) {
        var body = angular.element($window.document.body);
        var textarea = angular.element('<textarea/>');
        textarea.css({
            position: 'fixed',
            opacity: '0'
        });
        return {
            copy: function (stringToCopy) {
                var deferred = $q.defer();
                deferred.notify("copying the text to clipboard");
                textarea.val(stringToCopy);
                body.append(textarea);
                textarea[0].select();

                try {
                    var successful = $window.document.execCommand('copy');
                    if (!successfulthrow successful;
                    deferred.resolve(successful);
                } catch (err) {
                    deferred.reject(err);
                } finally {
                    textarea.remove();
                }
                return deferred.promise;
            }
        };
    }];
}]);

Full Example,
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);

//angular controller - copyToClipController
app.controller('copyToClipController', ['$scope', '$rootScope', '$copyToClipboard', function ($scope, $rootScope, $copyToClipboard) {
    var svm = $scope;
    svm.userList = [
        { "name": "Anil Singh""email": "aks@gmail.com""phone": "9011213333""address": "Noida, UP, India" },
        { "name": "Aradhya Singh""email": "ara@gmail.com""phone": "9013453363""address": "GR. Noida, UP, India" }];
   
    //copy user information
    svm.copyUserToClipboard = function (euser) {
        let copyUserInfo = {
            "Name": user.name,
            "EmailId": user.email,
            "Phone Number": user.phone,
            "Full Address": user.address,
        }
        $copyToClipboard.copy(JSON.stringify(copyUserInfo))
            .then(function () { });
    }

    //copy list of user information
    svm.copyUsersToClipboard = function (eusers) {
        var copyUsers = [];
        angular.forEach(usersfunction (userkey) {
            copyUsers.push({
                "Name": user.name,
                "EmailId": user.email,
                "Phone Number": user.phone,
                "Full Address": user.address,
            });
        }, copyUsers);
        $copyToClipboard.copy(JSON.stringify(copyUsers))
            .then(function () { });
    }
}]);

//angular provider -  copyToClipboard 
app.provider('$copyToClipboard', [function () {
    this.$get = ['$q''$window'function ($q$window) {
        var body = angular.element($window.document.body);
        var textarea = angular.element('<textarea/>');
        textarea.css({
            position: 'fixed',
            opacity: '0'
        });
        return {
            copy: function (stringToCopy) {
                var deferred = $q.defer();
                deferred.notify("copying the text to clipboard");
                textarea.val(stringToCopy);
                body.append(textarea);
                textarea[0].select();

                try {
                    var successful = $window.document.execCommand('copy');
                    if (!successfulthrow successful;
                    deferred.resolve(successful);
                } catch (err) {
                    deferred.reject(err);
                } finally {
                    textarea.remove();
                }
                return deferred.promise;
            }
        };
    }];
}]);
</script>
<body>

<div ng-app="myApp">

<div ng-controller="copyToClipController">
    <div class="copy">
        <a data-ng-click="copyUsersToClipboard($event, userList)" href="javascript:void(0)" title="Copy Users">Copy
            User List</a>
            <hr/>
    </div>
    
    <div class="copy" ng-repeat="user in userList">
        <ul>
        <span><a data-ng-click="copyUserToClipboard($event, user)" href="javascript:void(0)" title="Copy row">Copy
                this</a></span>
            <li>{{ user.name }}</li>
            <li>{{ user.email }}</li>
            <li>{{ user.phone }}</li>
            <li>{{ user.address }}</li>          
        </ul>
    </div>
</div>

</div>

</body>
</html>


ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^