Angular 4 - Copy text to clipboard

Question

I have an icon on the page. By clicking on this icon, I would like to create text and copy it to the clipboard

<td><img src='./assets/Copy.gif' (click)="copyToClipboard()"  /></td> 

and in the component

  copyToClipboard() {
     this.textToCopy = this.text1 + this.text2 + this.text3;  
     this.toastr.info('Copied to Clipboard');
  }

I looked at https://www.npmjs.com/package/ngx-clipboard . However, this package requires accessing the input element and copying text from this input element. In my use case, the text should be dynamically created and then added to the clipboard.

Can I use ngx-clipboard to copy to the clipboard or is there another package that would allow me to achieve this?

Answer 1

ngxClipboard . :

<td>
    <img src='./assets/Copy.gif' (click)="copyToClipboard()" ngxClipboard [cbContent]="textToCopy" />
</td> 

ClipboardModule . :

import { ClipboardModule } from 'ngx-clipboard';

@NgModule({
  imports: [
    // Other Imports
    ClipboardModule
  ],
  // Other code
})
export class AppModule { }

Answer 2

document.execCommand, .

.

- , .

function copyTextToClipboard(text) {
  var txtArea = document.createElement("textarea");
  txtArea.id = 'txt';
  txtArea.style.position = 'fixed';
  txtArea.style.top = '0';
  txtArea.style.left = '0';
  txtArea.style.opacity = '0';
  txtArea.value = text;
  document.body.appendChild(txtArea);
  txtArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
    if (successful) {
      return true;
    }
  } catch (err) {
    console.log('Oops, unable to copy');
  } finally {
    document.body.removeChild(txtArea);
  }
  return false;
}

copyToClipboard, , copyTextToClipboard

copyToClipboard() {
    this.textToCopy = this.text1 + this.text2 + this.text3;
    var result = this.copyTextToClipboard(this.textToCopy);
    if (result) {
        this.toastr.info('Copied to Clipboard');
    }
}

Answer 3

.

<button (click)="copyToClipboard(sharableLink)">Copy link</button>
<input type="text" value="This is the value to copy" #sharableLink>

copyToClipboard(element) {
    element.select();
    document.execCommand('copy');
    this.toaster('success', 'Success!', 'Link copied to clipboard.');
  }

Answer 4

.

<a class="accent" (click)="copyLink(textToCopy)">{{textToCopy}}</a>

copyLink(text:string) {
        const event = (e: ClipboardEvent) => {
            e.clipboardData.setData('text/plain', text);
            e.preventDefault();
            // ...('copy', e), as event is outside scope
            document.removeEventListener('copy', e);
        }
        document.addEventListener('copy', event);
        document.execCommand('copy');
    }

Answer 5

ngx-clipboard . . - ClipboardService. ,

import { ClipboardService } from 'ngx-clipboard'

constructor(private _clipboardService: ClipboardService){
...
}
copy(text: string){
  this._clipboardService.copyFromContent(text)
}

. , . Angular 4, . @ViewChild, .

HTML:

<textarea name="copyText" #copyText id="" style="opacity: 0;height: 0;"></textarea>

:

@ViewChild('copyText', { read: ElementRef }) copyText: ElementRef;

copyText() {
    const element = this.copyText.nativeElement;
    element.value = 'some text';
    element.focus();
    element.select();
    document.execCommand('copy');
}

JavaScript- Angular @ViewChild.

Answer 6

The problem (later underlined by the OP) of the approved answer using NgxClipboard is that the content cannot be set dynamically.

Using an event listener (click) does not work, because it starts after ngxClipboard is executed.

So, just define [cbContent] with the @Input receiver and forget about the event (click):

In the template:

<button ngxClipboard [cbContent]="foo">Click me</button>

In component:

@Input()
get foo() {
    // Dynamic generation of the text to put in the clipboard:
    return this.text1 + this.text2 + this.text3
}