CODEWITHSUNDEEP
cssangularprinting
esseara
esseara

Reputation: 880

Angular - print function does not load css

I'm trying to implement a print funcion in my Angular application. This is what I've done so far:

typescript

print() {

    let printContents, popupWin;
    printContents = document.getElementById('print-section').innerHTML;
    popupWin = window.open();
    popupWin.document.open();
    popupWin.document.write(`
          <html>
            <head>
              <link rel="stylesheet" type="text/css" href="print.component.css">
            </head>
            <body onload="window.print();window.close()">${printContents}</body>
          </html>`
    );
    popupWin.document.close();
  }

html

<div id="print-section" hidden>
  <div class="red">Hello</div>
</div>

css

.red{
    color:red;
}

The print thing works, but it doesn't load the css. If I add a <style> tag inside the write() function it works. Why the css is not loaded? The .css file and the .ts file are in the same folder.

EDIT: thanks to @match suggestion I realized that the browser looks for the css file inside the current path, i.e. www.myurl.it/currentpage/print.component.css. Instead I want the browser looking for the file inside the sources folder, i.e. coponents/myComponent. Is there a way to do that?

Upvotes: 0

Views: 3910

Answers (1)

Rakesh A R
Rakesh A R

Reputation: 206

Use 

@media print {
      .red{
    color:red;
  }
}

Upvotes: 2

Related Questions