There are so many JavaScript plugin available to Copy text from div or input box. Copy to clipboard is useful copy links, coupons, code, or password. This way, users don't need to type text or select and copy. User only need to click copy button only. This gives user smooth experience.
In this tutorial, we will implement copy to clipboard feature into Angular project. We will go through step by step from the scratch. The tutorial follows below steps:
We assume that you have already installed all required packages and complete Angular environment setup.
- Step 1: Create new Angular application
- Step 2: Install ngx-clipboard module
- Step 3: Import ClipboardModule in App Module
- Step 4: Use ngxClipboard directive into HTML
- Step 5: Start Angular server and test
So let's start from creating new Angular application.
Step 1: Create new Angular application
After installed Angular CLI package, we can create new Angular application using following ng command into Terminal or Command Prompt.
ng new clipboard
It will ask few questions like install router module, default stylesheet etc. You can give answer according to your requirement. Next change Terminal's working directory to application root.
cd clipboard
Step 2: Install ngx-clipboard module
In this step, we will install ngx-clipboard package using npm. This will provide clipboard directive which helps to copy and paste the text into Angular application.
npm install ngx-clipboard --save
Step 3: Import ClipboardModule in App Module
After we installed ngx-clipboard module, we need to import ClipboardModule in AppModule. Open app.module.ts file and import ClipboardModule and also add in imports array.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ClipboardModule } from 'ngx-clipboard';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
ClipboardModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 4: Use ngxClipboard directive into HTML
There are several ways to copy text. We will see input box and using ClipboardService method. You can refer official site to learn more ways.
Copy text from textbox
Now we are ready to use ngxClipboard directive into HTML template. We will create input box and pass its value to ngxClipboard directive. Open app.component.html file from app directory and change HTML code to below.
<!doctype html>
<html>
<head>
<title>Copy to clipboard</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" #container>
<div class="mt-3">
<div class="mb-3">
<label for="text" class="form-label">Copy to Clipboard</label>
<input type="text" #text class="form-control w-25" placeholder="Text message">
</div>
</div>
<button class="btn btn-primary" [ngxClipboard]="text">Copy text</button>
</div>
</body>
</html>
Copy using ClipboardService for dynamic copy data
If you want to copy dynamic data from the component class. You need to use copy() method from ClipboardService class. Open app.component.ts and import ClipboardService. You will also need to create instance of the class.
import { Component } from '@angular/core';
import { ClipboardService } from 'ngx-clipboard';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'This texst will be copied';
constructor(private clipboardService: ClipboardService) { }
copyText() {
this.clipboardService.copyFromContent(this.title)
}
}
We have also created copyText() method which will call on button click. In the app.component.html file, create a button with click event. The button will trigger copyText() method from component.
<!doctype html>
<html>
<body>
<div class="container m-3">
<button (click)="copyText()">Copy text</button>
</div>
</body>
</html>
Step 5: Start Angular server and test
That's it. Now run Angular server using below ng command into Terminal.
ng serve --open
This will start Angular server and open http://localhost:4200/ url into default browser. Now type into text box and click Copy button. This will copy text from the input box.
Conclusion
In this article, we have used ngx-clipboard module and used it to copy text from input box or from the component. I hope you have liked this article.
