Ionic 4 Copy to Clipboard Example - 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

$ npm install -g ionic cordova

Run the following command to create a new application

$ ionic start Ionic4ClipboardDemo blank --type=angular
$ cd Ionic4ClipboardDemo

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@beta

Import app.module.ts file

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

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { Clipboard } from '@ionic-native/clipboard/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    Clipboard,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

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

<ion-header>
  <ion-toolbar>
    <ion-title >Ionic 4 Clipboard</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content padding>

    <p>Enter text then click copy<br>
      <ion-textarea [(ngModel)]="CopyTextAreaText"></ion-textarea>
      <ion-button color="primary" (click)="copyText()">Copy Text</ion-button>
      </p>
    
    <p>Paste text<br>
      <ion-textarea [(ngModel)]="PasteTextAreaText"></ion-textarea>
      <ion-button color="primary" (click)="pasteText()">Paste Here</ion-button>
      <ion-button color="primary" (click)="clearClipboard()">Clear Clipboard</ion-button>
    </p>

</ion-content>

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

import { Component, ViewChild, ElementRef } from '@angular/core';

import { Clipboard } from '@ionic-native/clipboard/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  

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

  constructor(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.

Category: Ionic Framework