How to Print a Page in Angular?

This tutorial will provide example of how to print page in angular. In this article, we will implement a how to print html page in angular. it's simple example of angular print page with css. we will help you to give example of angular print page to pdf. You just need to some step to done angular print pdf from html.

If you need to add print button and give user to print current page in angular then i will show you simple example how to add print button in angular app.

you can easily print a page for pdf in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17 version app.

So, let's see bellow step and get qr code as like bellow screenshot:

Preview:

src/app/app.component.html

<h1>Angular Print Page Example - ItSolutionStuff.com</h1>
  
<p>
  Start editing to see some magic happen :)
</p>
  
<button (click)="printPage()">print</button>

src/app/app.component.ts

import { Component, VERSION } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  
  printPage() {
    window.print();
  }
}

src/app/app.component.css

@media print {
  button {
    display: none;
  }
}

Now you can run by bellow command:

ng serve

now you can check it.

I hope it can help you...