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.

Installation

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: [
...
    ClipboardModule,
...
]

Usage

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

System.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>
</div>
  • 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){
  this._clipboardService.copy(text)
}

Callbacks

  • 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">
    Copy
</button>

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 {
  constructor(
    private _clipboardService: ClipboardService,
    private _toasterService: ToasterService
  ) {
    this.handleClipboardResponse();
  }

  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.

Subscribe to our Newsletter

Get the Latest Article notification and Weekly Newsletters in your Inbox.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

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

About SAROJ MEHER

He is a Lecturer (English & Sociology), a professional Artist, and a blogger. He do paintings, sketches since his childhood. He is in the teaching field for 10 years. In this teaching line, he has experience in teaching English at High School and College levels. He has also experienced teaching computer theory and practicals during the school teaching period. He is in the Blogging field for more than 5 years.

Subscribe to our Newsletter

Get the Latest Article notification and Weekly Newsletters in your Inbox.

TRENDING ARTICLES

ARTICLESLATEST