Angular copyToClipboard

Angular copy array of objects | Angular copyToClipboard

Simple copy to clipboard functionality in angular without any dependencies.
As an 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

Angular copy array of objects | Angular copyToClipboard Angular copy array of objects | Angular copyToClipboard Reviewed by Anil Singh on 4:12 AM Rating: (5)
www.code-sample.com/. Powered by Blogger.
^