'Why I can not print Angular page with styles?

There are styles in root component:

.div {
   width: 400px;
   height: 200px;
   background: #000;
}

When I click button to print out this page I get preview without styles.

How to print out with all styles of component (s)?

angular

Solution 1:^[1]

Where you link your style sheet (in index.html) set media="all" to the tag.

Or if you are importing styles in angular.json you can add styles for printing by this:

@media print {
  .class {...}
}

Solution 2:^[2]

Actually you can do it using this print function

print(){
    let popupWin = window.open('', '_blank', 'width=1080,height=595');
    popupWin.document.open();
    let printContents = document.body.innerHTML;
    let printHead = document.head.innerHTML;
    popupWin.document
      .write(`<html>
         ${printHead}
        <body onload="window.print();">${printContents}</body></html>`);
    popupWin.document.close();}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	meed Anki

'Why I can not print Angular page with styles?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]