Ionic 5 Copy to Clipboard Integration Tutorial

In this Ionic 5 Clipboard example, we create a primary ionic copy and paste functionality by bringing into play ionic native and Cordova Clipboard plugin.

Theoretically, Clipboard is an ideal temporary and unnamed memory; this is probably used for the selection of text, an image, a file, or various other data types. Primary, utilized when you copy data to the Clipboard, so when you copy data to the Clipboard, then the stored data is replaced by the new data.

We will show you how to add a clipboard plugin into the ionic, angular application to build a copy and paste feature. The clipboard package is available through npm and ionic Cordova, and it provides remarkable support for iOS, Android, and Windows.

Ionic 5 Angular Clipboard (Copy and Paste) Example

  • Step 1: Getting Started
  • Step 2: Install Ionic Native and Cordova Plugins
  • Step 3: Update Clipboard in AppModule Class
  • Step 4: Update Home HTML Page
  • Step 5: Update Home TypeScript Page
  • Step 6: Test Ionic Application

Getting Started

As far as Ionic development is concerned, we think you have already configured the Ionic command-line-interface on your machine.

npm install -g @ionic/cli

You may use the recommended command to create the latest blank ionic, angular project.

ionic start test-app blank --type=angular

Get into the application folder:

cd test-app

Install Ionic Native and Cordova Plugins

Next up, you require to install Ionic native and Cordova plugins; by executing the given below commands, we will install and add Clipboard and native core plugins into the ionic app.

ionic cordova plugin add cordova-clipboard

npm install @ionic-native/clipboard

npm i @ionic-native/core

Update Clipboard in AppModule Class

To access the Clipboard plugin methods, you have to add the clipboard module into the main app module class.

Add following code in 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';


// module
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 {}

Update Home HTML Page

Let us implement Copy to Clipboard in Ionic, consequently we need to define the text string with a copy button, and we can copy the text and paste it into the paste area input field. Additionally, you may clear the copy text, so add the clear button with its respective method.

Insert code in app.module.html file:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Copy and Paste in Ionic 5
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

  <ion-card>
    <ion-item>
      <ion-textarea [(ngModel)]="textCopy"></ion-textarea>
    </ion-item>

    <ion-button (click)="copyData()" color="dark" expand="full">Copy</ion-button>
  </ion-card>

  <ion-card>
    <ion-item>
      <ion-textarea [(ngModel)]="textPaste" expand="full"></ion-textarea>
    </ion-item>

    <ion-button (click)="pasteData()" color="tertiary" expand="full">Paste text</ion-button>

    <ion-button (click)="clearClipboard()" color="warning" expand="full">Clear</ion-button>
  </ion-card>

</ion-content>

Update Home TypeScript Page

The Clipboard API has to be imported and added into the constructor method, and after that, you can access copy() or paste() methods to create a copy from the clipboard feature.

Insert code in 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 {
  
  textCopy:string = "Forget the failures.";
  textPaste:string = "Paste text here";

  constructor(private cb: Clipboard) { }

  copyData(){
    this.cb.copy(this.textCopy);
  }

  pasteData(){
    this.cb.paste().then((resolve: string) => {
         this.textPaste = resolve;
         console.log(resolve);
       }, (reject: string) => {
         console.error(reject);
       }
     );
  }

  clearClipboard(){
    this.cb.clear();
  }

}

Test Ionic Application

Let us begin testing the clipboard feature, starting ionic app is a simple process.

You need to execute some commands to add the platform for iOS, Android or Windows:

ionic cordova platform add ios

ionic cordova platform add android

ionic cordova platform add windows

Create the app build:

ionic cordova build ios

ionic cordova build android

ionic cordova build windows

Lastly, run the application:

ionic cordova run ios -l

ionic cordova run android -l

ionic cordova run windows -l

Integrate Copy to Clipboard in Ionic

Conclusion

We have eventually integrated the Clipboard plugin into the Ionic 5 Angular application and created a minor feature. You can copy text and paste the text using a button in the input field likewise. You may click on the button to clear the text copied from the clipboard.