Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Access The Native Device Clipboard In Ionic Framework

TwitterFacebookRedditLinkedInHacker News

There are often times where you would need to copy information from your mobile application to your devices native clipboard. Maybe you are making an address book application and you want to copy a phone number to the clipboard when you click on a contact. Doing this with native code can become a challenge.

Lucky for us, we are using Apache Cordova, and there is a plugin by Verso Solutions called CordovaClipboard. Using this in combination with the AngularJS extension set, ngCordova, can give us clipboard functionality with as little as four lines of code.

The following will explain how to make a simple Ionic Framework mobile application that uses the CordovaClipboard plugin with ngCordova.

Like with all the examples I do, let’s create a fresh Ionic Android and iOS application:

ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add ios

Remember, if you’re not using a Mac, you cannot add and build for the iOS platform.

The next step is to install the Apache Cordova plugin, CordovaClipboard. This can be done by running the following command from within your Ionic Framework project:

cordova plugin add https://github.com/VersoSolutions/CordovaClipboard

Technically, at this point you can use clipboard functionality, but we want to make things more AngularJS friendly by installing ngCordova. Start by downloading the latest release and then extracting ng-cordova.min.js into your www/js directory.

Now open your index.html file and make it look similar to the following:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="js/ng-cordova.min.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">

There is one thing I’m trying to demonstrate in the index.html file. It is very important that ng-cordova.min.js is included before the cordova.js file, otherwise strange results might happen.

One more thing must happen before we can start using ngCordova. Open your www/js/app.js file and alter the angular.module to look like the following:

var ionicApp = angular.module('starter', ['ionic', 'ngCordova'])

We can now start using the plugin in our code.

The documentation says the clipboard can be used like the following:

$cordovaClipboard.copy("Text To Copy").then(function() {
    // success
}, function() {
    // error
});

We’re going to take it a step further and make a working example out of it. The goal of this example is to have a list of items that can be long-clicked to perform tasks. In our scenario, the long-click will copy information about the item.

Inside the <ion-content> tags of your www/index.html file, include the following code:

<ion-content ng-controller="ExampleController">
    <ion-list>
        <ion-item href="#" on-hold="copyText('Item 1')">
            Item 1
        </ion-item>
        <ion-item href="#" on-hold="copyText('Item 2')">
            Item 1
        </ion-item>
    </ion-list>
</ion-content>

Notice that we have two list items, both with an on-hold attribute. When each of the list items are long-clicked, it will call our soon to be created copyText(string) method, copying the text to the clipboard. Open your www/js/app.js file and include the following controller:

ionicApp.controller("ExampleController", function($scope, $cordovaClipboard) {

    $scope.copyText = function(value) {
        $cordovaClipboard.copy(value).then(function() {
            console.log("Copied text");
        }, function() {
            console.error("There was an error copying");
        });
    }

});

With the text copied, it can be pasted into any application on the device. It is not restricted to only your Ionic application.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.

Search

Follow Us

Support This Site