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.
Install
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
copyFromContent
fromClipboardService
to copy any text you dynamically created.
import { ClipboardService } from 'ngx-clipboard'
...
constructor(private _clipboardService: ClipboardService){
...
}
copy(text: string){
this._clipboardService.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}
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 source code.
Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.
This awesome script developed by maxisam. Visit their official repository for more information and follow for future updates.