Angular 5 - Copy to clipboard

Question

I am trying to implement an icon that when clicked will save a variable to the user s clipboard  I have currently tried several libraries and none of them have been able to do so    How do I properly copy a variable to the user s clipboard in Angular 5

User · Answer

You can achieve this using Angular modules   navigator clipboard writeText  your text   then   catch e   gt  console error e

User · Answer

Solution 1  Copy any text HTML  lt button  click   quot copyMessage  This goes to Clipboard   quot  value  quot click to copy quot   gt Copy this lt  button gt    ts file copyMessage val  string       const selBox   document createElement  textarea        selBox style position    fixed       selBox style left    0       selBox style top    0       selBox style opacity    0       selBox value   val      document body appendChild selBox       selBox focus        selBox select        document execCommand  copy        document body removeChild selBox         Solution 2  Copy from a TextBox HTML   lt input type  quot text quot  value  quot User input Text to copy quot   userinput gt         lt button  click   quot copyInputMessage userinput  quot  value  quot click to copy quot   gt Copy from Textbox lt  button gt    ts file        To copy Text from Textbox      copyInputMessage inputElement       inputElement select        document execCommand  copy        inputElement setSelectionRange 0  0        Demo Here  Solution 3  Import a 3rd party directive ngx-clipboard  lt button class  quot btn btn-default quot  type  quot button quot  ngxClipboard  cbContent   quot Text to be copied quot  gt copy lt  button gt    Solution 4  Custom Directive If you prefer using a custom directive  Check Dan Dohotaru s answer which is an elegant solution implemented using ClipboardEvent   Solution 5  Angular Material Angular material 9   users can utilize the built-in clipboard feature to copy text  There are a few more customization available such as limiting the number of attempts to copy data

User · Answer

Copy using angular cdk   Module ts  import  ClipboardModule  from   angular cdk clipboard     Programmatically copy a string  MyComponent ts   class MyComponent     constructor private clipboard  Clipboard        copyHeroName         this clipboard copy  Alphonso            Click an element to copy via HTML    lt button  cdkCopyToClipboard   longText   cdkCopyToClipboardAttempts   2  gt Copy text lt  button gt    Reference  https   material angular io cdk clipboard overview

User · Answer

Below method can be used for copying the message -  export function copyTextAreaToClipBoard message  string      const cleanText   message replace   lt       gt     gt     g         const x   document createElement  TEXTAREA   as HTMLTextAreaElement    x value   cleanText    document body appendChild x     x select      document execCommand  copy      document body removeChild x

User · Answer

Use navigator clipboard writeText to copy the content to clipboard navigator clipboard writeText content  then   catch e   gt  console error e

User · Answer

As of Angular Material v9  it now has a clipboard CDK  Clipboard   Angular Material  It can be used as simply as    lt button  cdkCopyToClipboard   This goes to Clipboard  gt Copy this lt  button gt

User · Answer

Modified version of jockeisorby s answer that fixes the event handler not being properly removed   copyToClipboard item   void       let listener    e  ClipboardEvent    gt            e clipboardData setData  text plain    item            e preventDefault                document addEventListener  copy   listener       document execCommand  copy        document removeEventListener  copy   listener

User · Answer

First suggested solution works  we just need to change   selBox value   val    To  selBox innerText   val    i e    HTML    lt button  click   copyMessage  This goes to Clipboard    value  click to copy   gt Copy this lt  button gt     ts file   copyMessage val  string       const selBox   document createElement  textarea        selBox style position    fixed       selBox style left    0       selBox style top    0       selBox style opacity    0       selBox innerText   val      document body appendChild selBox       selBox focus        selBox select        document execCommand  copy        document body removeChild selBox

User · Answer

I think this is a much more cleaner solution when copying text   copyToClipboard item        document addEventListener  copy    e  ClipboardEvent    gt          e clipboardData setData  text plain    item          e preventDefault          document removeEventListener  copy   null               document execCommand  copy          And then just call copyToClipboard on click event in html   click   copyToClipboard  texttocopy

User · Answer

The best way to do this in Angular and keep the code simple is to use this project   https   www npmjs com package ngx-clipboard       lt fa-icon icon  copy  ngbTooltip  Copy to Clipboard  aria-hidden  true       ngxClipboard  cbContent   target value here        cbOnSuccess   copied  event   gt  lt  fa-icon gt

User · Answer

I know this has already been highly voted in here by now  but I d rather go for a custom directive approach and rely on the ClipboardEvent as  jockeisorby suggested  while also making sure the listener is correctly removed  same function needs to be provided for both the add and remove event listeners   stackblitz demo   import   Directive  Input  Output  EventEmitter  HostListener   from   angular core     Directive   selector    copy-clipboard      export class CopyClipboardDirective       Input  copy-clipboard     public payload  string      Output  copied     public copied  EventEmitter lt string gt    new EventEmitter lt string gt         HostListener  click      event      public onClick event  MouseEvent   void        event preventDefault        if   this payload        return       let listener    e  ClipboardEvent    gt          let clipboard   e clipboardData    window  clipboardData          clipboard setData  text   this payload toString           e preventDefault           this copied emit this payload               document addEventListener  copy   listener  false      document execCommand  copy        document removeEventListener  copy   listener  false           and then use it as such   lt a role  button   copy-clipboard    some stuff    copied   notify  event   gt     lt i class  fa fa-clipboard  gt  lt  i gt    Copy  lt  a gt   public notify payload  string          Might want to notify the user that something has been pushed to the clipboard    console info     payload   has been copied to clipboard        Note  notice the window  clipboardData   is needed for IE as it does not understand e clipboardData

[angular] Angular 5 - Copy to clipboard

Examples related to angular

Examples related to typescript

Examples related to angular5