Ionic 7 Copy to Clipboard with Add Clipboard Plugin Tutorial

Last Updated on March 4, 2024 by Digamber in Ionic

Ionic 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 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:

sudo 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

Disable Strict Type Errors

To avoid TypeScript compiling issues, we just need to open tsconfig.json file:

First, set below property under “compilerOptions” property.

"compilerOptions": {
    "strictPropertyInitialization": false,
    "skipLibCheck": true
    ...
}

Secondly, add given props under “angularCompilerOptions”.

"angularCompilerOptions": {
    "strictTemplates": false,
    ...
}

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.

npm i cordova-clipboard --legacy-peer-deps

npm install @ionic-native/clipboard --legacy-peer-deps

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],
  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>

View App on Browser

By default, the @ionic-native/core plugin is not available in our app’s package.json file.

Run the below command to add the native core package.

npm install @ionic-native/core --legacy-peer-deps

Eventually, you can run the Ionic app in a web browser by executing the following command:

ionic serve

Conclusion

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.

The Ionic Copy and Paste tutorial is over, hope you’ll like it!