Ionic 7 Copy to Clipboard with Add Clipboard Plugin Tutorial
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!