ngneat / Copy To Clipboard

✂️ Modern copy to clipboard. No Flash.

Simple module exposing a directive that'll try to use execCommand with fallback to IE-specific clipboardData interface and finally, resort to usual prompt with proper text content and message.

Installation

ng add @ngneat/copy-to-clipboard

Usage

When an element that contains copyToClipboard directive is clicked, the value of copyToClipboard will be copied into the clipboard.

<button copyToClipboard="Copy this text to clipboard">Copy</button>
<button [copyToClipboard]="property">Copy</button>

You can add a global function that'll be called on copy:

import { CopyToClipboardModule, COPY_TO_CLIPBOARD_HANDLER } from '@ngneat/copy-to-clipboard';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, CopyToClipboardModule],
  providers: [
    {
      provide: COPY_TO_CLIPBOARD_HANDLER,
      useFactory(toaster: ToasterService) {
        return function(text) {
          toaster.success('Copied..');
        };
      },
      deps: [ToasterService]
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Netanel Basal 💻

This project follows the all-contributors specification. Contributions of any kind welcome!