Hemant Vishwakarma: Load HTML page in a service with its own CSS Angular

Sunday 1 November 2020

Load HTML page in a service with its own CSS Angular

I have a Service, PrintService that I have added to my application. The Service extracts elements from a page and renders another window with the contents of the extracted elements.

import {Injectable} from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class PrintService {
  popupPrint(selector: string) {
    const printContents = (document.querySelector(selector) as HTMLTableElement).innerHTML;
    const popupWin = window.open('', '_blank', 'top=0,left=0,height=auto,width=auto');
    popupWin?.document.open();
    popupWin?.document.write(`
      <html>
        <head>
          <title>Print tab</title>
          <style>
            .d-flex  {
              width: 100%;
              display: flex;
              justify-content: space-between;
            }
            
             // ... More CSS

            @media print {
              .d-print-none {
                display: none;
              }
            }
          </style>
        </head>
        <body>
          <section class='d-print-none'>
            <button onclick="window.print();">Print</button>
            <button onclick="window.close();">Cancel</button>
          </section>
            ${printContents}
        </body>
        <script>
        (function() {
           window.print();
        })();
        </script>
      </html>`
    );
  }

  constructor() {
  }
}

This works. Print Service on Stackblitz

My Problem now is this, I need to be remove the css styles from the service above to its own file, How can I be able to achieve this

My initial plan was to move it to a text file and read the text file from angular but I believe there is a better approach

from Load HTML page in a service with its own CSS Angular