✂️ copy-to-clipboard

Simple Angular module exposing basic Directive that'll try to use native document.execCommand to copy content text to clopboard and finally, display overidable alert to confirme action to user.

installation

Install npm package with the following commande:

1$ npm install @ngzn/copy-to-clipboard

And add import inside app.module.ts or desired module.

1import { BrowserModule } from '@angular/platform-browser';
2import { NgModule } from '@angular/core';
3
4import { AppComponent } from './app.component';
5// import Angualr CopyToClipboardModule from @ngnz
6import { CopyToClipboardModule } from '@ngnz/copy-to-clipboard';
7
8@NgModule({
9  declarations: [AppComponent],
10  imports: [
11    BrowserModule,
12    // add module inside your Angular application module
13    CopyToClipboardModule 
14  ],
15  providers: [],
16  bootstrap: [AppComponent],
17})
18export class AppModule {}
19

Usage

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

1<button nzCopyToClipboard="Text to copy to clipboard">Copy</button>
2<button [nzCopyToClipboard]="typescritpProperty">Copy</button>

Only Function Usage

This feature is exporetable without Angular wrapping to allow using inside other projet.

1// import function
2import { copyToClipboardFunction } from '@ngnz/copy-to-clipboard';
3
4// user copy function logic
5const myTextToCopy = 'See magic happen!';
6copyToClipboardFunction(myTextToCopy);