Ionic 6 Copy to Clipboard with Add Clipboard Plugin Tutorial

Ionic 6 Copy and Paste tutorial; In this lesson, you will learn and profoundly implement the copy and paste feature in the Ionic app using the Clipboard Cordova plugin.

The clipboard is related to special temporary memory whose locus in the device; it intact the last copied information such as files, text plus text. Ideally, the clipboard memory replaced when the new data is copied.

Ionic 6 Copy and Paste Example

• Step 1: Set Up Ionic Environment
• Step 2: Add Cordova Clipboard Plugin
• Step 3: Register Clipboard in App Module
• Step 4: Implement Copy to Clipboard in Ionic

Set Up Ionic Environment

Firstly, you have to start by installing the Ionic CLI tool on your development system:

npm install -g @ionic/cli

One more time, type the following Ionic command to install the new ionic project:

ionic start ionic-demo-app blank --type=angular

Head over to the project directory:

cd ionic-demo-app

Add Cordova Clipboard Plugin

Further, type the following command to add the cordova-clipboard plugin, similarly use npm command to install ionic native clipboard package.

ionic cordova plugin add cordova-clipboard

npm install @ionic-native/clipboard

Register Clipboard in App Module

Then, head over to the main app module file and import the Clipboard module from the ‘@ionic-native/clipboard/ngx’ package; likewise, include this clipboard package in the providers’ array.

Open and update app.module.ts file:

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

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

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

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

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

export class AppModule {}

Implement Copy to Clipboard in Ionic

The Clipboard package allows you to set the custom events for copying text from the textarea form element and paste it into another text area. Furthermore, you can clear the text that you copy using the clipboard package.

Open and update home.page.ts file:

import { Component } 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 {
  
  CopyInputText:string = "Hello World!";
  PasteText:string = "Paste Text!";

  constructor(private clipboard: Clipboard) { }

  // Copy
  copyString(){
    this.clipboard.copy(this.CopyInputText);
  }

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

  // Clear
  clearText(){
    this.clipboard.clear();
  }

}

Create the text area using ionic textarea directive; on top of that, add the custom events to ionic buttons to copy and paste content from the clipboard.

Open and update home.page.html file:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div id="container">
    <p>
      <ion-item>
        <ion-textarea [(ngModel)]="CopyInputText"></ion-textarea>
      </ion-item>

      <ion-button color="primary" (click)="copyString()">Copy</ion-button>
    </p>

    <p>
      <ion-item>
        <ion-textarea [(ngModel)]="PasteText"></ion-textarea>
      </ion-item>

      <ion-button color="success" (click)="pasteText()">Paste Text String Here</ion-button>

      <ion-button color="danger" (click)="clearText()">Clear</ion-button>
    </p>
  </div>
</ion-content>

Conclusion

The Ionic Copy and Paste tutorial is over; In this tutorial, we have explored bit by bit how to add Clipboard plugin in Ionic app using Cordova package; and how to copy and paste text from one element to another.