How to print HTML template in Angular and TypeScript?

Sometimes, we want to print HTML template in Angular and TypeScript.

In this article, we’ll look at how to print HTML template in Angular and TypeScript.

How to print HTML template in Angular and TypeScript?

To print HTML template in Angular and TypeScript, we call the window.print method.

For instance, we write

<div class="doNotPrint">Header is here.</div>

<div>hello world</div>

<div class="doNotPrint">
  my footer is here.
  <button (click)="onPrint()">Print</button>
</div>

to add some content in the template.

Then we write

//...
export class AppComponent {
  //...
  onPrint() {
    window.print();
  }
}

to add the onPrint method in our component.

It calls window.print to open the print dialog.

Then we write

@media print {
  .doNotPrint {
    display: none !important;
  }
}

to hide the stuff with the doNotPrint class in the printout.

Conclusion

To print HTML template in Angular and TypeScript, we call the window.print method.