Ionic 3 Copy to Clipboard Plugin ( Copy and Paste ) Ionic Native 3.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 this tutorial we will implement Clipboard or Copy Paste plugin in Ionic 3 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 …

Also See: Add Clipboard Native Plugin in Ionic 4 Application

Create a new application using Ionic CLI

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

$ npm install -g ionic cordova

Run the following command to create a new application

$ ionic start Ionic3ClipboardDemo blank
$ cd Ionic3ClipboardDemo

 

Install Clipboard Plugin

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

$ ionic cordova plugin add cordova-clipboard
$ npm install --save @ionic-native/clipboard

Import app.module.ts file

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

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { Clipboard } from '@ionic-native/clipboard';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    Clipboard,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

 

Add button in home.html copy and paste text.

<ion-header>
  <ion-navbar>
    <ion-title>
      Clipboard Demo
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  
  <p>Enter text then click copy<br>
  <ion-textarea [(ngModel)]="CopyTextAreaText"></ion-textarea>
  <button ion-button (click)="copyText()">Copy Text</button>
  </p>

<p>Paste text<br>
  <ion-textarea [(ngModel)]="PasteTextAreaText"></ion-textarea>
  <button ion-button (click)="pasteText()">Paste Here</button>
  <button ion-button (click)="clearClipboard()">Clear Clipboard</button>
</p>

</ion-content>

 

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

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Clipboard } from '@ionic-native/clipboard';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  CopyTextAreaText:string = "Sample text to copy!";
  PasteTextAreaText:string = "Paste here!";

  constructor(public navCtrl: NavController,private clipboard: Clipboard) {

  }

  //Copy Event
  copyText(){
    this.clipboard.copy(this.CopyTextAreaText);
  }

  //Paste Event
  pasteText(){
    this.clipboard.paste().then(
      (resolve: string) => {
         this.PasteTextAreaText = resolve;
         console.log(resolve);
       },
       (reject: string) => {
         console.error('Error: ' + reject);
       }
     );
  }

  //Clear Event
  clearClipboard(){
    this.clipboard.clear();
  }

}

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.