Merge pull request #197 from DmitryEfimenko/master

feat: added option cleanUpAfterCopy

.gitignore

@@ -22,6 +22,7 @@ node_modules
 !.vscode/launch.json
 !.vscode/extensions.json
 
+
 # misc
 /.sass-cache
 /connect.lock

README.md

@@ -154,6 +154,18 @@ export class ClipboardResponseService {
 
 _Special thanks to @surajpoddar16 for implementing this feature_
 
+### Clean up temporary textarea used by this module after each copy to clipboard
+This library creates a textarea element at the root of the body for its internal use. By default it only destroys it when the directive is destroyed. If you'd like it to be destroyed after each copy to clipboard, provide root level module configuration like this:
+```ts
+import { ClipboardModule } from 'ngx-clipboard';
+...
+imports: [
+    ClipboardModule.forRoot({ cleanUpAfterCopy: true }),
+]
+```
+
+Special thanks to [@DmitryEfimenko](https://github.com/DmitryEfimenko) for implementing this feature
+
 ## Example
 
 [stackblitz.com](https://stackblitz.com/github/maxisam/ngx-clipboard)

package.json

@@ -8,6 +8,7 @@
         "build": "ng build ngx-clipboard --prod && npm run build-copy",
         "tslint-check": "tslint-config-prettier-check ./tslint.json",
         "test": "ng test ngx-clipboard",
+        "test:watch": "ng test ngx-clipboard --watch",
         "lint": "ng lint ngx-clipboard",
         "publish:lib": "yarn publish ./dist/lib",
         "publish:lib:next": "yarn publish ./dist/lib --tag next",

projects/ngx-clipboard/src/lib/interface.ts

@@ -4,3 +4,7 @@ export interface IClipboardResponse {
     event: Event;
     successMessage?: string;
 }
+
+export interface ClipboardParams {
+    cleanUpAfterCopy?: boolean;
+}

projects/ngx-clipboard/src/lib/ngx-clipboard.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { ClipboardDirective } from './ngx-clipboard.directive';
 import { ClipboardIfSupportedDirective } from './ngx-clipboard-if-supported.directive';
+import { ClipboardDirective } from './ngx-clipboard.directive';
 
 @NgModule({
     imports: [CommonModule],

projects/ngx-clipboard/src/lib/ngx-clipboard.service.ts

@@ -1,20 +1,26 @@
-import { Inject, Injectable, Optional } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
+import { Inject, Injectable, Optional } from '@angular/core';
 import { WINDOW } from 'ngx-window-token';
-import { Subject, Observable } from 'rxjs';
-import { IClipboardResponse } from './interface';
+import { Observable, Subject } from 'rxjs';
+
+import { ClipboardParams, IClipboardResponse } from './interface';
 
 // The following code is heavily copy from https://github.com/zenorocha/clipboard.js
 
 @Injectable({ providedIn: 'root' })
 export class ClipboardService {
     private tempTextArea: HTMLTextAreaElement | undefined;
+    private config: ClipboardParams = {};
 
     private copySubject = new Subject<IClipboardResponse>();
     public copyResponse$: Observable<IClipboardResponse> = this.copySubject.asObservable();
 
     constructor(@Inject(DOCUMENT) public document: any, @Optional() @Inject(WINDOW) private window: any) {}
 
+    public configure(config: ClipboardParams) {
+        this.config = config;
+    }
+
     public get isSupported(): boolean {
         return !!this.document.queryCommandSupported && !!this.document.queryCommandSupported('copy') && !!this.window;
     }
@@ -74,7 +80,12 @@ export class ClipboardService {
             }
         }
         this.tempTextArea.value = content;
-        return this.copyFromInputElement(this.tempTextArea);
+
+        const toReturn = this.copyFromInputElement(this.tempTextArea);
+        if (this.config.cleanUpAfterCopy) {
+            this.destroy(this.tempTextArea.parentElement);
+        }
+        return toReturn;
     }
 
     // remove temporary textarea if any