title: How can I implement a print functionality in Angular?
body: <p>I am trying to implement a print functionality within my invoicing app, however, the print function  I have only works for me once-that is, on the first click only. When I try to click again the click function is not triggered. And when I check my console.log, the following is error is thrown:
  <strong>ERROR TypeError: Cannot read property 'postMessage' of null</strong></p>
  
  <p>Here is what i have tried:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>printInvoice() {
    const printContents = document.getElementById('print-index-invoice').innerHTML;
    const originalContents = document.body.innerHTML;
    document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="modal fade" id="modalIndexInvoicePreview" tabindex="-1" role="dialog"&gt;
    &lt;button type="submit" class="btn btn-info btn-lg mt-2 position-absolute" (click)="printInvoice()"&gt;
      &lt;i class="fa fa-print icon-print"&gt;&lt;/i&gt;Print&lt;/button&gt;
    &lt;div class="modal-dialog modalContent"&gt;
  
      &lt;div class="modal-content modalIndexInvoicePreview" id="print-index-invoice"&gt;
        &lt;div class="modal-header div-logo"&gt;
          &lt;img class="logo-invoice" [src]="logoUrl"&gt;
          &lt;div&gt;
            &lt;b&gt;Invoice|Receipt|Attachment&lt;/b&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>