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.


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.

Leave a Comment

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

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