JavaScriptAngularJSCopy Text To Clipboard Angular Directive | ngx-clipboard

Copy Text To Clipboard Angular Directive | ngx-clipboard

An Angular directive for clipboard.js that allows the user to copy text to clipboard and paste elsewhere. Here is the full guide to use the ngx-clipboard components.


You can get it on npm.

npm install ngx-clipboard --save

Open your module file e.g app.module.ts and update imports array

import { ClipboardModule } from 'ngx-clipboard';
imports: [


If you use SystemJS to load your files, you might have to update your config:

    map: {
        'ngx-clipboard': 'node_modules/ngx-clipboard'

Copy source

This library support multiple kinds of copy source.

  • Setting cbContent attribute
<button ngxClipboard [cbContent]="'target string'">Copy</button>

You can assign the parent container to avoid focus trapper issue, #145

<div #container>
    <button ngxClipboard [cbContent]="'target string'" [container]="container">Copy</button>
  • Setting an input target

<input type="text" #inputTarget />

<button [ngxClipboard]="inputTarget">Copy</button>
  • Using copy from ClipboardService to copy any text you dynamically created.
import { ClipboardService } from 'ngx-clipboard'


constructor(private _clipboardService: ClipboardService){

copy(text: string){


  • cbOnSuccess callback attribute is triggered after copy was successful with $event: {isSuccess: true, content: string}
<button (cbOnSuccess)="copied($event)" [cbContent]="'example string'">Copied</button>

Or updating parameters directly like so

<button (cbOnSuccess)="isCopied = true" [cbContent]="'example string'">Copied</button>
  • cbOnError callback attribute is triggered when there’s failure in copying with $event:{isSuccess: false}

Conditionally render host

You can also use the structural directive *ngxClipboardIfSupported to conditionally render the host element

<button ngxClipboard *ngxClipboardIfSupported [cbContent]="'target string'" (cbOnSuccess)="isCopied = true">

Special thanks to @surajpoddar16 for implementing this feature

Handle copy response globally

To handle copy response globally, you can subscribe to copyResponse$ exposed by the ClipboardService

export class ClipboardResponseService {
    private _clipboardService: ClipboardService,
    private _toasterService: ToasterService
  ) {

  handleClipboardResponse() {
    this._clipboardService.copyResponse$.subscribe((res: IClipboardResponse) => {
      if (res.isSuccess) {
        this._toasterService.pop('success', undefined, res.successMessage);

See live demo and download the source code.

This awesome script is developed by maxisam. Visit their official repository for more information and follow for future updates.

Saroj Meher
Saroj Meher
Howdy! Friends, I am Saroj Meher. I am an Artist. I do Painting on mediums like Acrylic, Watercolour, Oil etc. I have over 7 years of experience in WordPress. I am currently running 30+ website. I am specialized in WordPress and WooCommerce, WordPress Theme Customization and Theme Development. I can fix any kind of WordPress error/issue like PHP, CSS, Js issues and other Theme and Plugin related issues. Client's Satisfaction is my first priority.

Subscribe For More!

Subscribe to get the Latest Updates directly in you Email box.

Explore More


Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I am a Lecturer (English & Sociology), a professional Artist, and a blogger. I do painting, sketches since my childhood. I am in the teaching for 10 years. In this teaching line, I have experience in teaching English at High School and College levels. I have also experienced teaching computer theory during the school teaching period. This is my personal web corner over the internet.

Quick Guides

7 Simple Steps To Start Your Blogging Journey