Copy html to clipboard (Angular)

Question

Is there a way to copy html to clipboard in Angular?

I'm using ngx-clipboard, and trying to format the copied text (i.e., use bold, bullets)

.ts

constructor(private _clipboardService: ClipboardService) {}

callServiceToCopy() {
    this._clipboardService.copyFromContent('<B>This is an important message<\/B>\n These are the details');
}

Component:

<button class="btn btn-primary btn-sm" (click)="callServiceToCopy()">Copy</button>

Stackblitz: https://stackblitz.com/edit/github-ar12tp-irzz84

What do you mean by _format the copied text_ ? In your stackblitz example `callServiceToCopy()` function is working fine. I click on the button and the string was copied to my clipboard. Can you please elaborate your question. — HirenParekh, Mar 30 '19 at 18:44

score 0 · Answer 1 · edited Mar 26 '19 at 16:27

0

copyToClipboard(id:string): void {
           const from = document.getElementById(id);
           const range = document.createRange();
           window.getSelection().removeAllRanges();
           range.selectNode(from);
           window.getSelection().addRange(range);
           document.execCommand('copy');
           window.getSelection().removeAllRanges();
 }

 <button (click)="copyToClipboard('<B>This is an important message<\/B>\n These are the details')">Copy text</button>

edited Mar 26 '19 at 16:27

answered Mar 26 '19 at 16:23

George C.

6,574
12
55
80

Thanks...that does not seem to work though. https://stackblitz.com/edit/github-ar12tp-5b4xua – user749798 Mar 26 '19 at 16:32

score 0 · Answer 2 · answered Mar 26 '19 at 20:07

0

It doesn't use angular functionality, but here's what I use:

var dummy = document.createElement('input'),
  text = window.location.href;

document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
document.execCommand('copy');
document.body.removeChild(dummy);

answered Mar 26 '19 at 20:07

chuloon

23
4

Thanks, but looking for angular response. – user749798 Mar 28 '19 at 06:34

Mahi · Answer 3 · 2019-04-05T04:34:45.677

0

.html

<div id="infoEd" role="textbox" aria-multiline="true" tabindex="2" contenteditable="true" (keyup)="" (keydown)="" (paste)="wrapContent($event)">
      </div>

.ts

   public wrapContent(evt) {
      const pastedData = evt.clipboardData.getData('html');
        console.log(pastedData);
    }

This Stackoverflow answer can help:- How do I copy to the clipboard in JavaScript?

edited Apr 05 '19 at 04:34

answered Apr 03 '19 at 07:47

Mahi

3,748
4
35
70

score 0 · Answer 4 · edited Apr 06 '19 at 09:55

app.component.ts:

copyToClipboard(id:string): void {
  const fromHtml = this._elementRef.nativeElement.querySelector(id).innerHTML;
  const newNode = this.renderer.createElement('div');
  this.renderer.appendChild(this._elementRef.nativeElement, newNode);
  this.renderer.setProperty(newNode, 'innerHTML', fromHtml);
  this._clipboardService.copyFromContent(fromHtml);
}

app.component.html:

<textarea id="textId">This is a sample Text</textarea>
<button (click)="copyToClipboard('#textId')">Copy text</button>

Please check this StackBlitz: https://stackblitz.com/edit/github-ar12tp-scrwbn

score 0 · Answer 5 · answered Nov 03 '22 at 14:50

you can now use this api:

const type = "text/html";
const blob = new Blob([ '<h1>Your <b>html</b> content here</h1>' ], { type });
const data = [new ClipboardItem({ [type]: blob })];

navigator.clipboard.write(data);

Details: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/write

Check here for browser compatibility: https://caniuse.com/mdn-api_clipboard_write

Copy html to clipboard (Angular)

5 Answers5

.html

.ts

Linked