Ionic Tutorials

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.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Recent Posts

React Router DOM 6 Fetch Current URL / Pathname Tutorial

If you want to learn how to get the current route's name, component pathname or…

2 days ago

React Js Hide & Show with React Bootstrap Collapse Tutorial

React show and hide example. In this tutorial, we will show you how to step…

5 days ago

How to Integrate Tabs in React Js with React Bootstrap

Tabs are one of the best UI elements for displaying multiple contents in a single…

1 week ago

How to Build Toast Component in React Js with Bootstrap

In this tutorial, we will learn how to create a toast notification component in the…

2 weeks ago

React Js Bootstrap Modal Popup Component Tutorial

Bootstrap offers tons of custom UI solutions. On top of that, it is easy to…

2 weeks ago

React Build Counter using useReducer Hook Tutorial

React js counter using the useReducer hook example. In this post, we will learn how…

2 weeks ago