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.