An Angular directive for clipboard.js that allows the user to copy text to clipboard and paste elsewhere.
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
fromClipboardService
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.