Welcome folks today in this blog post we will be implementing copy to clipboard
functionality in angular 14
to copy text to clipboard
inside the input field using ngx-copypaste
library in typescript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new angular
project using the below command
ng new sampleapp
And after that you need to install the below library
using the npm command as shown below
npm i ngx-copypaste
And after that you will seeing the below directory
structure of the angular app as shown below
And after that you need to go to app.module.ts
file and copy paste the following code
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; // Import ngx-twitter-timeline import { NgxCopyPasteModule } from 'ngx-copypaste'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, // Specify library as an import NgxCopyPasteModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Now we need to to go to app.component.html
file and copy paste the below html
code as shown below
app.component.html
1 2 3 4 5 6 7 8 9 10 |
<div ngxCopyPaste #cp="copy"> <h1>This is Heading</h1> <p>This is some more text</p> </div> <button (click)="cp.copy()">Copy to Clipboard</button> <div> <textarea name="" id="" cols="30" rows="10></textarea> </div> |