Ionic 4 | Add Clipboard Plugin ( Copy and Paste ) Ionic Native 4.x Version

Clipboard is referred to a special memory space provided in the device, specialized to keep last copied data like text, images, files etc. Clipboard is a temporary space which is washed out as user copies new data and replaces existing data.

In the previous post we discuss on the implementation of Clipboard plugin in Ionic version 3, but here we will implement the clipboard plugin in Ionic latest version 4. It is still in beta phase but soon it will be available as stable.

In this tutorial we will implement Clipboard or Copy Paste plugin in Ionic 4 application, using which developer can provide a handy operation to a user for easy copy and paste features on some event like button click as sometimes it takes much time to select text and paste it somewhere by deleting existing and long tap to paste.

In Application, we will have an empty text field with a paste button, this paste button will paste data from Clipboard to the text field.

Let’s begin implementation …

Create a new application using Ionic CLI

To create an application you must have NodeJS and Ionic Cordova CLI

Run the following command to create a new application

 

Install Clipboard Plugin

Install Cordova and Ionic Native plugins in CLI using below commands one by one

Import app.module.ts file

After import and adding in provider app.module.ts file will look like this

 

Add button in home.page.html copy and paste text.

 

Add methods in home.page.ts for copy, paste, and clear clipboard

After adding HTML there will be three buttons to Copy and Paste text, and Clear which will clear Clipboard itself leaving nothing to paste as clipboard will empty.

 

Leave a Reply

avatar
  Subscribe  
Notify of