Question

96

Angular 4 - Copy text to clipboard

rated 0 times [ 101] [ 5] / answers: 1 / hits: 34164 / 7 Years ago, sat, august 19, 2017, 12:00:00

I have a clickable icon on the page. On click on this icon, I would like to construct some text and copy that in 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 have looked at https://www.npmjs.com/package/ngx-clipboard. However, this package requires to refer to an input element and copy the text from that input element. In my use case, the text needs to be dynamically created and then added to clipboard.

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

arlethjeanettep

Add To Favorites

Follow

Total Points: 506

Total Questions: 96

Total Answers: 79

Location: Liberia

Member since Tue, Mar 14, 2023

1 Year ago

answered 7 Years ago alejandro · Accepted Answer

You need to use ngxClipboard directive with your image. This is how you need to use it to solve your issue:

<td>

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

</td>

Remember to add ClipboardModule in your app module. Example code below:

import { ClipboardModule } from 'ngx-clipboard';



@NgModule({

  imports: [

    // Other Imports

    ClipboardModule

  ],

  // Other code

})

export class AppModule { }