htmlangularprintingcomponentspage-break

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

I tried like below

project structure

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

result

Solution

  • Works fine for me.

    enter image description here

    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.