Access The Native Device Clipboard In Ionic Framework

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:

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:

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:

Notice the two highlighted lines.  Those are the two things 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:

We can now start using the plugin in our code.

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

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:

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:

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 is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • Penton

    Hi,

    Thanks for taking time to come out with this tutorial. I had followed the tutorial but unable to get it to work at all. The following are the result from various device/environments:

    1) Mi-3, Androidi 4.4.2: text wasn’t copy
    2) HTC-One, Android 4.2.2: text wasn’t copy
    3) Genymotion (Sony Xperia S), Android 4.1.1: text wasn’t copy

    4) Chrome browser (by using “ionic serve” command: The following error was reported in Console:

    TypeError: Cannot read property ‘plugins’ of undefined

    at Object.copy (http://localhost:8100/lib/ng-cordova-master/dist/ng-cordova.min.js:7:14824)

    at Scope.$scope.copyText (http://localhost:8100/js/app.js:27:27)

    at $parseFunctionCall (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20124:18)

    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:49185:11

    at Scope.$eval (http://localhost:8100/lib/ionic/js/ionic.bundle.js:22178:28)

    at Scope.$apply (http://localhost:8100/lib/ionic/js/ionic.bundle.js:22276:23)

    at HTMLElement.listener (http://localhost:8100/lib/ionic/js/ionic.bundle.js:49184:15)

    at Object.triggerEvent [as trigger] (http://localhost:8100/lib/ionic/js/ionic.bundle.js:798:15)

    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:1636:20

    Do you have any clue? Thanks!

    • I strongly advise you to not use ionic serve or any live-reload type commands. Apache Cordova plugins use native device code so the only correct way to test is to build the application and install it in your device or simulator.

      Regards,

      • Penton

        Yes, I did test with native devices and emulator. But, it’s not working with no error message. Do you have any clue?

        • There has to be some kind of error whether it be an exception or an error in the promise.

          Mind putting your project on GitHub?

          Regards,

  • mikemahonrocks

    Thanks man! I am just learning Ionic and Angular. How about a tutorial on pasting from the clipboard using an action sheet? Or what do you think would be best for a pasting menu onhold?

    • I’m not sure the action-sheet would work out because you need to know where you are pasting to. Unless you forced the paste content into a specific field.

  • Adrenaline Junkie

    does this work with text only? can I copy rawHtml?

    • You should be able to copy whatever string data you pass into the copy() function.

      Regards,

  • Marko Djordjevic

    Hi Nic, thanks for this great example, it’s very simple and helpful. But somehow it doesn’t work for me the way I’d like it to work. The copy/paste functionality works perfect while in app, so if both copy and paste actions are done in my app, everything’s fine. Unless I try to paste that text out of my app, to some other app for example Memo on my Samsung tablet. The text that was previously in the clipboard before I copied the text in my app, gets pasted. Do you have any idea why this happened? I followed all the instructions from your post and my code is completely the same.

  • Irfan Soetedja

    thanks. very helpful