[Fixed] I want to print angular component with page break using CTRL + P

Issue

I tried like below

project structure

Job summary component need to be printed

HTML

<div>
  <div>first page</div>
  <div class="page-break"></div>
  <div>second page</div>
</div>

CSS

@media print {
  .page-break { page-break-before: always; } 
}

the result only shows the first page

Solution

Works fine for me.

Please make sure that you added your css file to your component’s styleUrls array.

E.g: styleUrls: [ './app.component.css' ]

Check demo at Stackbtitz. Click Open in New Window to check.