Angular 14 Copy to Clipboard Example to Copy Text inside TextArea & Input Fields Using ngx-copypaste

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

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 { }

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

<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>

<h1>This is Heading</h1>

</div>

<button (click)="cp.copy()">Copy to Clipboard</button>

<div>

</div>