title: How do I copy HTML source into clipboard?
body: <p>I have a segment of code I would like to copy and subsequently paste into an HTML reader (MS Word or Outlook).  </p>
  
  <p>It should retain the HTML formatting, but not paste the HTML as text. </p>
  
  <p>I have three functions: </p>
  
  <pre><code>copyHTMLToClipboard(id:string): void {
      const fromHtml = this._eRef.nativeElement.querySelector(id).innerHTML;
      const newNode = this.render.createElement('div');
      this.render.appendChild(this._eRef.nativeElement, newNode);
      this.render.setProperty(newNode, 'innerHTML', fromHtml);
      this._clipboardService.copyFromContent(fromHtml);
      alert(fromHtml);
    }
  
    copyToClipboard(): void {
      this._clipboardService.copyFromContent(this.buildFile());
    }
  
    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);
    }
  </code></pre>
  
  <p>called by three buttons: </p>
  
  <pre><code>&lt;button mat-raised-button (click)="copyMessage(buildFile())" value="click to copy" &gt;Copy&lt;/button&gt;
  &lt;button mat-raised-button ngxClipboard (click)="buildFile();copyToClipboard()" &gt;Copy&lt;/button&gt;
  &lt;button mat-raised-button (click)="copyHTMLToClipboard('#ExistingUserBox')"&gt;Copy text&lt;/button&gt;
  </code></pre>
  
  <p>buildFile() creates a string of the HTML code below, so it can be saved as an .htm file.</p>
  
  <p>The buttons/functions are trying to copy:</p>
  
  <pre><code>&lt;div class="innerbox layoutbox" id="ExistingUserBox" #ExistingUserBox &gt;
  &lt;div class="col editorbox" style="font-family: Lato, Arial, Helvetica, sans-serif; font-size: 12pt; font-weight:400; color:#464646; line-height: 16pt;"&gt;
      &lt;div style="font-family: Lato, Arial, Helvetica, sans-serif; font-size: 12pt; font-weight:400; color:#464646; line-height: 16pt;" &gt;{{Employee_Name}}&lt;/div&gt;
      &lt;div style="font-family: Lato, Arial, Helvetica, sans-serif; font-size: 10pt; font-weight:400; color:#464646; line-height: 12pt;"&gt;{{Employee_Phone}}&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  </code></pre>
  
  <p>All three functions successfully get the HTML as a text string, but when I paste it I get all the HTML markup and not just the formatting. </p>
  
  <p>I have looked at:</p>
  
  <p><a href="https://stackoverflow.com/questions/32435161/javascript-copy-all-html-code-into-clipboard">Javascript - copy all html code into clipboard</a></p>
  
  <p><a href="https://stackoverflow.com/questions/55361776/copy-html-to-clipboard-angular">Copy html to clipboard (Angular)</a></p>
  
  <p>and while they reference similar code to what I'm doing, neither answers the question of how to get formatted html code into the clipboard. </p>
  
  <p>I want to get this: 
  John Doe
  <strong>123-4567</strong></p>
  
  <p>Rather than getting this: </p>
  
  <pre><code>&lt;div class="innerbox layoutbox" id="ExistingUserBox" #ExistingUserBox &gt;
  &lt;div class="col editorbox" style="font-family: Lato, Arial, Helvetica, sans-serif; font-size: 12pt; font-weight:400; color:#464646; line-height: 16pt;"&gt;
      &lt;div style="font-family: Lato, Arial, Helvetica, sans-serif; font-size: 12pt; font-weight:400; color:#464646; line-height: 16pt;" &gt;John Doe&lt;/div&gt;
      &lt;div style="font-family: Lato, Arial, Helvetica, sans-serif; font-size: 10pt; font-weight:bold; color:#002a5f; line-height: 12pt;"&gt;123-4567&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>