0

I have an angular service which returns a string and I want this string to be in the user's clipboard.

I've installed angular2-clipboard to display the result in an input and let the user also click on the "copy" button in case of automatic copy failure. But my wish is that when the input value bound to a property changes, it automatically set the clipboard content with that new value.

This is currently working:

<input readonly type="text" class="form-control" [(ngModel)]="createdCode">
<button class="btn btn-default" type="button" ngIIclipboard [cbContent]="createdCode">copy</button>

I have tried to find a way with ng-change to call "#btn.onclick()" to raise the click event but could not get the expected behaviour.

Is there a way to do this?

Fabio Antunes
  • 22,251
  • 15
  • 81
  • 96
dotixx
  • 1,490
  • 12
  • 23
  • I'm not sure but I think that for security reasons you can only add things to the clipboard after user action, in this case a click. – Fabio Antunes Oct 19 '16 at 10:10
  • You can check this example https://plnkr.co/edit/Ag55tKNpmumoerUxBLg1?p=preview – yurzui Oct 19 '16 at 10:28

1 Answers1

1

I accomplished this in an application that I was making without using angular2-clipboard.

I reference a the DOM element by using ViewChild and ElementRef and I used a function like this:

    @ViewChild('plainVersion') plainVersion: ElementRef;
    plain.value = this.plainVersion.nativeElement.innerText;
    plain.select();
    try {
      let success = document.execCommand('copy');
    } catch(err){
      console.log(err);
    }
    window.getSelection().removeAllRanges();

Make sure to import ViewChild and ElementRef from @angular/core.

I have only tested this in Chrome but it may work in other browsers.

Frank
  • 114
  • 6