Using @media print with Angular doesn't work

Question

I'm trying to create a printable page using Angular (5+), however I'm having trouble with the styles.

The content I'm trying to print is inside a component and the style is being sent with a file defined under the stylesUrls, like this:

@Component({
    templateUrl: 'print-page.html',
    styleUrls: [
        '_print-page.scss'
    ],
})

Ant the styles like this:

@media print {
    body *:not(#print),
    aside {
        display: none !important;
    }

    #print {
        figure {
            display: none;
        }
    }
}

But when I open the print tab the page the figure elements are hidden, but the the aside element, for example, is still showing on the page. It's not being hidden.

I tried to move the styles out of the component and set it direct on the styles file. When I do this, the other elements are hidden, including the div to be printed. No matter what I do, I can't prevent the style to show only the #print div.

What should I do?

Answer 1

if you are using angular cli move your print scss to .angular-cli.json file. In this way it will be available and ready when your component loaded.

  "prefix": "xyz",
  "styles": [
    "_print-page.scss",
    "style.scss",

You can read view reder option for more details