Angular 5 – Copy to clipboard

by

Solution 1: Copy any text

HTML

<button (click)="copyMessage('This goes to Clipboard')" value="click to copy" >Copy this</button>

.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

 <input type="text" value="User input Text to copy" #userinput>
      <button (click)="copyInputMessage(userinput)" value="click to copy" >Copy from Textbox</button>

.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

<button class="btn btn-default" type="button" ngxClipboard [cbContent]="Text to be copied">copy</button>

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.

More Related Contents:

  1. Read response headers from API response – Angular 5 + TypeScript
  2. How do I share data between components in Angular 2?
  3. Error when trying to inject a service into an angular component “EXCEPTION: Can’t resolve all parameters for component”, why?
  4. How to dynamically add a directive?
  5. Ionic 2 Form goes up when keyboard shows
  6. When to use square brackets [ ] in directives @Inputs and when not?
  7. Angular2 – Interaction between components using a service
  8. Reactive forms – disabled attribute
  9. Multiple canActivate guards all run when first fails
  10. TS2531: Object is possibly ‘null’
  11. Custom ExceptionHandler change detection lag
  12. angular-i18n work-around for translations in code?
  13. Trigger update of component view from service – No Provider for ChangeDetectorRef
  14. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
  15. Pass parameter into route guard
  16. Typescript dependency injection public vs private
  17. Rxjs Retry with Delay function
  18. What is the meaning of question mark in expressions in Angular 2?
  19. Merging http observables using forkjoin
  20. Angular: selected on option of select doesn’t work as excepted while using along with ngModel
  21. Angular 2 translation change language in application
  22. Enabling CORS on Azure Active Directory
  23. How to use Bootstrap in an Angular project?
  24. What is pipe for in RxJS?
  25. How to throw error from RxJS map operator (angular)
  26. Angular reactive Form error: Must supply a value for form control with name:
  27. Angular, Http GET with parameter?
  28. Angular 2 disable sanitize
  29. Can I use Angular i18n to translate string literals in typescript code
  30. How to generate components in a specific folder with Angular CLI?

Leave a Comment