0

I am using ngx clipboard to copy my value to clipboard which is working fine if I do that in the main page but I want that functionality in my modal which is neither throwing any error nor copying anything. Angular-5.2.3 ngx-clipboard-9.1.3 Below is the code:

<span>
<img src="../../assets/img/copy-icon.png" ngxClipboard  [cbContent]="myvalue" (click)="copyToClipboard()">
</span>

and my ts file:

copyToClipboard(){
  console.log("copyToClipboard")
 }
Akshay
  • 365
  • 1
  • 3
  • 20

2 Answers2

0

For all those who are getting this error below is the answer: TLDR; Make your own textarea to hold the value to copy and hook ngxClipboard to it.

Longer Explanation I had a couple of issues with this plugin that seemed to happen a lot in Chrome (v64). I was getting intermittent successes.. most of the time the 'copy to clipboard' would fail to actually copy anything, and the 'success' callback would also be called. So it was the worst of both.. nothing in the logs, no copy, cbOnSuccess called. The above seemed exacerbated by large amounts of text. Safari seemed to work just fine. In Chrome, I noticed some messages in the console in the 'verbose' mode that were timeout kinds of errors.

Now I don't know the full story, but it seemed like the code in ngx-clipboard that was 'creating a text area' was showing me (in the debugger) a message like 'Uncaught SyntaxError: Unexpected end of input'.

I also use a Bootstrap modal but I'm not sure if that was really causing much of an issue. In the end, I was able to get everything going when I:

made my own used the [ngxClipboard]="textAreaName" format html template

<div class="modal fade" id="export-bundle-modal-{{bundleToExport.id}}" tabindex="-1" role="dialog"
     aria-labelledby="modal-content modal-header title">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" #exportBundleModalClose data-dismiss="modal">&times;</button>
                <span id="title">Export {{bundleToExport.name}}</span>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <textarea class="form-control text-area" readonly="readonly"
                                  rows="10" #bundleJson style="resize: none">{{bundleWithDependencies | json}}</textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" type="submit" data-dismiss="modal"
                        [disabled]="!taxonomiesLoaded || !componentTypesLoaded || !configurationsLoaded"
                        [ngxClipboard]="bundleJson" (cbOnSuccess)="copied()">
                    <small *ngIf="!(taxonomiesLoaded && componentTypesLoaded && configurationsLoaded)">
                        LOADING...
                    </small>
                    <small *ngIf="taxonomiesLoaded && componentTypesLoaded && configurationsLoaded">
                        COPY TO CLIPBOARD
                    </small>
                </button>
            </div>
        </div>
    </div>
</div>

Notice the button and how bundleJson is attached to the via the #bundleJson and the 'value' of the textarea is a pipe calculated value. Doing the calculation here (as opposed to when the 'copy to clipboard' was clicked also was necessary.. in essence, make sure the string in the textarea is correct before trying to send it to the clipboard.

We also use the bootstrap.js + jQuery integration instead of a native Angular bootstrap solution (don't ask), so notice that the data-dismiss="modal" is also attached to the button. When the button is clicked both the copied() function as well as the close of the modal happen.. there didn't seem to be any chaining/timing issues.

Akshay
  • 365
  • 1
  • 3
  • 20
0

Add #container in modal div.

<div class="modal fade" id="addAddressSuccessModal" tabindex="-1" role="dialog" aria-hidden="true" #container>

And to copy =>

<div  ngxClipboard [cbContent]="createdAddress" [container]="container" ><label class="fbold color-bluey-grey font-10 cursor-pointer">TAP TO COPY</label></div>
krishnanjk7
  • 1
  • 2