In this article, We learn how to implement the ngx-copypaste in angular for copy to clipboard feature. I will show you how to do it, just follow the steps clearly.

For more updates please do Subscribe via Email:

Implement copy to clipboard in angular using ngx-copypaste
Implement copy to clipboard in angular using ngx-copypaste

I. ngx-copypaste

Its a NPM package that has capacity to copy and paste the content inside the html component which where you put an identifier to start copying via hitting the only and not doing manually selection in mouse and executing Ctrl+C for copy and Ctrl+V for paste.

node-copy-paste is a command line utility that allows read/write (i.e copy/paste) access to the system clipboard.

II. Requirements

Before we start, Please make sure to have installed the following

  • VS Code – code editor.
  • NPM – Node package module library

III. Implementation

I assume that you are already done creating a project in angular and have some idea about it. If you don’t have please refer this link here.

To install the ngx-copypaste package just run this npm command. This will install the available latest version of the package.

npm i ngx-copypaste

Or if you are installing for the specific version just do like this. for the available version just look and find a version here that suitable for your app version.

npm i ngx-copypaste@version

Import ngx-copypaste module in Angular app.

import {NgxCopyPasteModule} from 'ngx-copypaste'
  imports: [
  • Implement copy to clipboard in textbox
<input type='text' ngxCopyPaste #cp="copy"/>
<button (click)="cp.copy()">Copy</button>
  • Implement copy to clipboard in HTML tag.
<p ngxCopyPaste #cp="copy">Code life.</p>
<button (click)="cp.copy()">Copy</button>
  • Implement copy to clipboard in complex div.
<div ngxCopyPaste #cp="copy">
  <h1>Lorem ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur 
  adipiscing elit.
 Nullam rutrum augue at ante sollicitudin posuere.
 Pellentesque congue consequat enim quis luctus.</p>
    <h2>Lorem ipsum</h2>
<button (click)="cp.copy()">Copy</button>

Also you can bind it to any tag in HTML.

Happy Learning..

Thank you for visiting my blog site. Hoping you learn more here. please feel free to comment and suggest if there is need to enhance and update. thank you.

Github :

Related Topics

Leave a Reply

Your email address will not be published. Required fields are marked *