copy-to-clipboard-angular

From 6.0.0, there is no other JS dependency anymore. Just Angular.

It works with angular version 2.0.0 and up

To make more sense with the future versioning scheme of Angular, the directive selector is now rename to CopyToClipboard

Dependencies

• Angular >=6.0.0

If you need to use it on 2.x, please use version 7.x.x. If you need to use it on 4.x, please use version 8.x.x. If you need to use it on 5.x, please use version 10.x.x.

The code are pretty much the same, in 8.0.0 it uses InjectionToken which requires angular4 and above.

Install

You can get it on npm.

npm install copy-to-clipboard-angular --save

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

import { CopyToClipboardModule } from 'copy-to-clipboard-angular';
...
imports: [
...
    CopyToClipboardModule,
...
]

Copy source

This library support multiple kinds of copy source.

• Setting cbContent attribute

<button CopyToClipboard [cbContent]="'target string'">Copy</button>

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

<div #container>
  <button CopyToClipboard [cbContent]="'target string'" [container]="container">Copy</button>
</div>

• Setting an input target

....

<input type="text" #inputTarget>

<button [ngxClipboard]="inputTarget">Copy</button>

• Using copyFromContent from CopyToClipboardService to copy any text you dynamically created.

import { CopyToClipboardService } from 'ngx-clipboard'

...

constructor(private _copyToClipboardService: CopyToClipboardService){
...
}

copy(text: string){
  this._copyToClipboardService.copyFromContent(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}

Build project

1. npm i

2. npm run build

To run demo code locally

npm run start